In container with flex-grow: 1 the content is overflowing when it should be scrollable

Question

I have a container that is flex-grow sized to fill up the remaining space within a fixed size container.

Within the flex-grow container, I have another div that is a lot bigger than the flex sized container. How do I make it so that the content-wrapper element is scrollable instead of the child element overflowing.

Thank you!

.main-content-container {
    padding: 0 20px;
    display: flex;
    flex-flow: column nowrap;
    grid-gap: 10px;
    height: 550px;
    background: green;
}

.sub-content-container {
  width: 300px;
  background: grey;
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
}

.content-wrapper {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  overflow: auto;
}

.content-container {
  height: 10000px;
  background: #555;
}

body {
  background: black;
  color: white;
  padding-bottom: 30px;
}

<div class='main-content-container'>
  <p>stuff</p>
  <div class='sub-content-container'>
    <p>header</p>
    <div class='content-wrapper'>
       <div class="content-container">I WANT THIS TO STAY WITHIN THE CONTENT-WRAPPER</div>
    </div>
  </div>
</div>

Answer 1

Generally speaking, for the overflow property to work, the container needs to be overflowed. That requires a fixed length on the container. Without a fixed length (height or width), there's nothing to trigger an overflow. The flex-grow property doesn't establish a fixed length, so it doesn't work.

Of course, setting a fixed height on your container is not an option if you want a dynamic layout.

So, to solve both problems, set the container to height: 1px.

• this establishes the fixed length;
• it doesn't interfere with the dynamic lengths; and,
• the flex-grow property expands the container to full height

But there's one more problem. The nested flex container in column direction seems to be ignoring the overflow property. This is possibly because of the nesting in a flex formatting context. Hence, if possible, switch that container back to a block formatting context.

Make these adjustments to your code:

.content-wrapper {
  height: 1px; /* new */
  flex-grow: 1;
  /* display: flex; */
  flex-flow: column nowrap;
  overflow: auto;
}

.main-content-container {
    padding: 0 20px;
    display: flex;
    flex-flow: column nowrap;
    grid-gap: 10px;
    height: 550px;
    background: green;
}

.sub-content-container {
  width: 300px;
  background: grey;
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
}

.content-wrapper {
  height: 1px; /* new */
  flex-grow: 1;
  /* display: flex; */
  flex-flow: column nowrap;
  overflow: auto;
}

.content-container {
  height: 10000px;
  background: #555;
}

body {
  background: black;
  color: white;
  padding-bottom: 30px;
}

<div class='main-content-container'>
  <p>stuff</p>
  <div class='sub-content-container'>
    <p>header</p>
    <div class='content-wrapper'>
       <div class="content-container">I WANT THIS TO STAY WITHIN THE CONTENT-WRAPPER</div>
    </div>
  </div>
</div>

jsFiddle demo