How can I make Flexbox container take up full height of parent and be scrollable?

Question

The body tag is set to overflow:hidden, which makes the page not scrollable. I have a couple of nested containers, that take up all the available space.

HTML:

<div class="app">
  <div class="container-1">
    <div class="container-2">
      <div class="container-3">
        <div class="container-4">
          <div class="container-5">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

body {
  overflow: hidden;
}

p {
  padding: 30px 0;
  background: lightGray;
}

.app {
  display: flex;
  height: 100%;
}

.container-1 {
  position: relative;
  height: 100%;
  width: 100%;
}

.container-2 {
  display: flex;
  flex: 1 1 auto;
}

.container-3 {
  display: flex;
  flex: 1 1 auto;
}

.container-4 {
  display: flex;
  flex: 1 1 auto;
}

.container-5 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: auto;
}

Codepen

Now I want container-5 to be scrollable. But it only works, if I specify a height for container-5, like height: 100vh. Instead, I would like container-5 to take up all the available space in the parent and be scrollable. Any ideas how to achieve that?

Answer 1

I would simplify your code and use CSS grid instead of flexbox

body {
  overflow: hidden;
  margin:0;
}

p {
  padding: 30px 0;
  background: lightGray;
}

.app {
  display: grid;  /* grid container */
  height: 100vh; /* height on the upper container */
}

.app * {
  display: inherit; /* cascading grid */
  min-height: 0; /* related question : https://stackoverflow.com/a/43312314/8620333 */
}

.container-5 {
  overflow: auto; /* scroll here */
}

<div class="app">
  <div class="container-1">
    <div class="container-2">
      <div class="container-3">
        <div class="container-4">
          <div class="container-5">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

With flexbox it would be like below:

body {
  overflow: hidden;
  margin:0;
}

p {
  padding: 30px 0;
  background: lightGray;
}

.app {
  display: flex;  /* flex container */
  height: 100vh; /* height on the upper container */
}

.app * {
  display: inherit; /* cascading flex */
  flex-direction: column;
  flex: 1;
  min-height: 0; /* related question : https://stackoverflow.com/q/36247140/8620333 */
}

.container-5 {
  overflow: auto; /* scroll here */
}

<div class="app">
  <div class="container-1">
    <div class="container-2">
      <div class="container-3">
        <div class="container-4">
          <div class="container-5">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>