解决办法很简单，默认情况下，flex布局有一个属性flex-shrink，指定了当出现压缩时，元素被压缩的比例。默认值是1，所以上面的问题就是由于该属性引起的，默认情况下所有的子元素都被压缩了。我们只要把子元素的flex-shrink设置成0即可。代码如下
style="
height: 100px;
width: 400px;
background-color: green;
display: flex;
overflow-y: auto;
style="
height: 100px;
width: 100px;
background-color: orange;
border: 1px solid white;
flex-shrink: 0;
style="
height: 100px;
width: 100px;
background-color: orange;
border: 1px solid white;
flex-shrink: 0;
style="
height: 100px;
width: 100px;
background-color: orange;
border: 1px solid white;
flex-shrink: 0;
style="
height: 100px;
width: 100px;
background-color: orange;
border: 1px solid white;
flex-shrink: 0;
......
最终结果满足了我的需求。
