【CSS】解决flex布局时子元素height属性失效

admin

对于设置了父元素为flex布局的子元素而言，如果没有设置flex-shrink，那么子元素可能会被它的兄弟元素所挤压，是的子元素的高度失效。
父盒子，设置了flex属性表示它是一个flex容器。内部装了三个子盒子，均设置了高度，下面则是多个列表项。
如果列表项的数目足够多，将页面撑满后会使得上面三个子盒子的高度失效，变成跟随子盒子内文字高度。
子元素heigth属性失效，是因为被flex-grow影响了。
flex-grow属性定义了项目的放大比例，默认为1，即如果空间较大，该项目将放大。
如果所有项目的flex-grow属性都为1，当空间较大时，都将等比例放大。如果一个项目的flex-gorw属性为0，其他项目都为1，则空间较大时，前者不放大。
负值对该属性无效。

拓展知识

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

综上得出解决办法：本项目中给想要不受影响的子元素设置flex-grow:0;