How to show scroll bars in a div with the same width as its header

Issue

I am using CSS to set the style for two sibling DIVs (a div.header and a div.body) so that their width is equal and the minimum width of the header is the minimum width of its div.wrapper so that scrollbars will appear on the browser window when narrower than the header.

BUT I am also trying to have scrollbars appear on div.body when the div.content within it expands outside of div.body. Currently the div.body expands to fit its content. I would also like div.body to fill the vertical space when div.content is small.

---

Edit: It's difficult to explain, so here is a picture that might help. Left side is when the full .header width is visible. Right side adds scrollbars at the outer level (browser window) when narrower than the .header text.

---

I am not confident that my current approach is on the right path, but I have the header enforcing the minimum width based on https://stackoverflow.com/a/48226415

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

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;
  display: flex;
  flex-grow: 1;
  overflow-x: scroll;
  overflow-y: auto;
}

<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>

Here is my JSFiddle with comments in the .content style at the top of the CSS.

Solution

1. Force the .body width to both 0 and 100%

• Force the width of .body class to be 0 so the width of the container is defined by the .header (the .body doesn't contribute to the width)
• Then force the width of the .body again to be 100% using min-width

This gets the .body and its scrollbars to behave as desired relative to the .wrapper.

(I got inspiration for this step from this not-obviously related answer: https://stackoverflow.com/a/55041133/186818)

2. Change the .wrapper to inline-flex and fill the visible space

• Set the .body height to 100% to fill the vertical space of the .wrapper.
• Change the .wrapper to inline-flex with:

  display: inline-flex;
  flex-grow: 1;
  flex-direction: column;
  /* fill the visible space */
  min-width: 100%;
  height: 100%;
  

  This stacks the .header over the .body and expands to fill the space without extending past the visible boundaries.

Revised Code Snippet

.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;
  
  /* Do this:               */
  display: inline-flex;
  flex-grow: 1;
  flex-direction: column;
  /* fill the visible space */
  min-width: 100%;
  height: 100%;

  /* Not this: */
  /* display: inline-block; */
  /* min-height: 100%;      */
}
.header {
  background-color: lightgreen;
  white-space: nowrap;
}
.body {
  background-color: lightblue;

  /* Do this:       */
  display: block;
  width: 0;
  min-width: 100%;
  height: 100%;

  /* Not this:      */
  /* display: flex; */
  /* flex-grow: 1;  */

  overflow-x: scroll;
  overflow-y: auto;
}

<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>

And here is a link to the JSFiddle.

Answered By - dpdearing