flex: 1； 子元素高度较高时不展示滚动条而是撑开父元素

场景描述

比如下图的结构，整体采用 flex 布局实现，即右侧绿色框 display: flex，两个黑色框 高度固定，蓝框 flex: 1; overflow: auto;

有时候会发现即使这样设置了，蓝色框中的内容高度较高时，也不会展示滚动条，而是撑高蓝色框以及再上层绿色框的高度，页面整体展示出了滚动条；

出现问题的原因及解决方案

最外层红色框以及右侧绿色框的高度一般是 height: 100%; ，height: 100% 最怕的一个问题就是断层，即设置height: 100% 的元素的父元素高度未知，所以可以检查是否有 height 断层的情况。

//有时以下也是需要的
html, body {
    
    
	height: 100%;
}

还有一种情况是设置的 overflow: auto; 的上层元素没有 overflow: auto;，比如上图中的蓝色部分想要超出滚动，蓝色框和蓝色的父级绿色框两个都要设置 overflow: auto;