JSFiddle - React, Tailwind, and code Playground

by H3AR7B3A7

HTML

<div class="root">
  <div class="wrapper">
    <div class="header">
      header header header header header header header header header header header header
    </div>
    <div class="body">
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>

CSS

.content {
  background-color: pink;
  margin: 1rem;
  width: 1000px;
}

body {
  margin: 0;
}

.root {
  background-color: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.wrapper {
  background-color: lightgray;
  overflow: hidden;
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
}

.header {
  background-color: lightgreen;
  white-space: nowrap;
}

.body {
  background-color: lightblue;
  width: 500px;
  overflow-x: scroll;
  overflow-y: auto;
}