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;

  /* FIXME: when content is short, can .body expand to fill the space? */
  /* FIXME: when content height is large, vertical scrollbars on .body? */
  /* height: 500px; */

  /* WORKING: when width is small, .body width matches .header */
  width: 100px;
  /* FIXME: when width is large, .body matches .wrapper width and has scrollbars */
  /* 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-block;

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