flex-grow容器内容溢出，如何设置content-wrapper为可滚动？

问题核心在于flex column布局下，flex item的默认min-height: auto属性——它会让content-wrapper被内部超高的content-container撑开，导致overflow: auto无法触发滚动效果。

只需要给content-wrapper添加一行CSS即可解决：

min-height: 0;

修改后的完整代码 #

.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;
  min-height: 0; /* 新增关键样式 */
}

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

原理说明 #

min-height: 0会覆盖flex item的默认最小高度规则，强制content-wrapper的高度受父容器的flex布局约束，不再被子元素无限撑开。此时overflow: auto就能正常生效，内部超出容器高度的内容会自动触发滚动条。

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