解决flex布局flex:1宽高被内容撑开问题

问题复现

布局采用flex 所有div均自适应 当子元素过多时会将flex:1的父盒子撑开导致页面出现滚动条

目的是当绿色父元素设置了flex: 1 样式，想在其中子元素超出父元素高度的情况下，产生滚动条，在父元素区域内滚动。

目标结果

解决方案

在flex:1绿色父盒子样式中添加以下样式👇

height: 0;
overflow-y: auto;

宽度出现此问题也适用

width: 0;
overflow-x: auto;

体验