父元素设置flex:column后,子元素height无效

时间:2024-03-15 20:46:08

我想得到下图效果,于是设置
容器的flex:column,
子元素1设置height:30px;
子元素2设置flex:1; overflow-y:auto;
但是子元素1的高度怎么都不生效,发现是被 flex-shrink影响了。于是我将子元素1的flex-shrink设置为0,不被缩小。它就乖乖的显示我设置的高度了。
父元素设置flex:column后,子元素height无效

flex-shrink介绍

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。