flex布局列设置overflow-y:auto无滚动条反而撑高页面如何解决

Flex 布局中子项的默认 min-height 值为 auto，该规则会强制子元素高度不小于其内部内容的固有高度，不会被父容器的可用高度限制收缩。
代码逻辑的问题点：

• 外层.test是纵向flex容器，高度设为100vh
• .c-container作为flex子项设置了flex:1，预期占满header之外的剩余高度
• 但.c-container默认min-height: auto，会被内部.col-1的长文本直接撑高，连带突破100vh的页面高度限制
• 此时.col-1的高度是随内容自适应增长的，不存在内容溢出自身边界的情况，设置的overflow-y: auto自然不会触发滚动条。

给.c-container添加min-height: 0覆盖默认属性值，让它可以被父容器的剩余高度约束，内部列内容超出高度时就会触发滚动逻辑：

.c-container {
  display: flex;
  flex: 1;
  min-height: 0; /* 新增该行即可 */
}

.test {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

header {
  border: 1px solid red;
}

.c-container {
  display: flex;
  flex: 1;
  min-height: 0;
}

.col-1 {
  width: 50%;
  background: green;
  overflow-y: auto;
}

.col-2 {
  width: 50%;
  background: yellow;
}

原有HTML结构不需要任何修改，生效后长文本超出.col-1的可用高度时就会自动展示纵向滚动条，不会再撑高整体页面。

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