在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
。