iOS上display:flex的兼容性问题

Posted 2022-11-27 zhulin2609

在ios上，当父元素的样式为：display: flex，且flex-direction: column;，子元素上设置的height会失效。

原因是：
被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;或者设置min-height。