JSFiddle - React, Tailwind, and code Playground

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;

  /* example large content within the .body */
  height: 200px;
  width: 1000px;
}

body { margin: 0; }
.root {
  background-color: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
    
  /* allow scrolling to see all of header */
  overflow-x: auto;
  /* y-direction scroll should be within .body */
  overflow-y: hidden;
}

.wrapper {
  background-color: lightgray;
  overflow: hidden;
  
  display: inline-flex;
  flex-grow: 1;
  flex-direction: column;
  /* fill the visible space */
  min-width: 100%;
  height: 100%;

}
.header {
  background-color: lightgreen;
  white-space: nowrap;
}
.body {
  background-color: lightblue;
  display: block;
  width: 0;
  min-width: 100%;
  height: 100%;
  
  overflow-x: scroll;
  overflow-y: auto;
}