如何让含固定高度子元素的父容器中，可扩展div不溢出

问题根源 #

你的布局里，那个设置了flex-grow: 1的橙色虚线容器（第二个子元素），在flex column方向布局下默认带有min-height: auto属性——这个属性会让容器被内部内容撑开，完全无视父容器的高度限制，导致里面设置了overflow-y: scroll的center容器无法触发滚动，跟着一起溢出父容器。

修复方案 #

给橙色虚线容器添加min-height: 0，强制它的高度受限于父容器的剩余空间，这样内部的滚动容器就能正常工作。

修改后的代码 #

<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; min-height: 0;">
      <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>

内容的提问来源于stack exchange，提问作者godfryd