how to make growing div not overflowing its parent that contains also fixed div above

In the code below the main div has max-height set to 100% (of its parent that has 300px height). This main div contains two child: one with fixed height and the second with flex-grow: 1 and its child with lots of content has set overflow-x: scroll.

The problem is that the second child with its big sub-child does not want to behave and scroll nicely but are rude and overflow their parent (the main div). How to solve it?

<html>
<head>
  <style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
  </style>
</head>

<body style="height: 300px; max-height: 300px; margin: 0px; padding: 5px; border: 1px solid red;">
  <div style="height: 100%; max-height: 100%; display: flex; flex-direction: column; margin: 0px; padding: 5px; border: 1px solid green;">

    <div style="height: 50px; padding: 5px; border: 1px dashed blue;">
      top
    </div>

    <div style="flex-grow: 1; display: flex; padding: 5px; border: 1px dashed orange;">
      <div style="padding: 5px; border: 1px dashed blue;">
        left
      </div>
      <div style="flex-grow: 1; padding: 5px; border: 1px dashed blue; overflow-y: scroll;">
        center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
        center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
      </div>
      <div style="padding: 5px; border: 1px dashed blue;">
        right
      </div>
      </div>
    </div>
  </div>
</body>

</html>

Solution

Try to limit the size of the child by using max-height. When you use flex-grow: 1, it allows the child element to grow to absorb extra space in the container, but it does not automatically limit its size to the parent's bounds when its content is too large.

Here's how you could fix it:

<html>
<head>
  <style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
  </style>
</head>

<body style="height: 300px; max-height: 300px; margin: 0px; padding: 5px; border: 1px solid red;">
  <div style="height: 100%; max-height: 100%; display: flex; flex-direction: column; margin: 0px; padding: 5px; border: 1px solid green;">

    <div style="height: 50px; padding: 5px; border: 1px dashed blue;">
      top
    </div>

    <!-- Set max height as you'd like -->
    <div style="flex-grow: 1; display: flex; padding: 5px; border: 1px dashed orange; max-height: calc(100% - 50px);">
      <div style="padding: 5px; border: 1px dashed blue;">
        left
      </div>
      <div style="flex-grow: 1; padding: 5px; border: 1px dashed blue; overflow-y: scroll;">
        center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
        center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
      </div>
      <div style="padding: 5px; border: 1px dashed blue;">
        right
      </div>
    </div>
  </div>
</body>
</html>