flex:1在ie浏览器的兼容问题

场景描述:

父元素只有最大高度,没有固定高度,在display:flex且flex-direction:column时,想子元素通过自身内容撑开一个高度,达到最大高度后实现滚动。

写了如下代码:


结果在Google和Firefox浏览器下达到了想要的效果,但在ie浏览器下子flex:1无法显示。

通过查看控制台,发现ie浏览器对flex:1解析不同,Google和Firefox浏览器解析为flex:1 1 0%,ie浏览器解析为flex:1 1 0px。

那么既然这样是否可以显示设置flex:1 1 0%,结果发现还是不行;后来通过设置flex:auto后ie浏览器下可以显示内容了,但是还是有问题,otherChild的内容高度不是我们期望的样子,效果如下图:


不知道为什么在ie下会显示成这样,在这种显示情况下,当给父元素parent设置一个具体高度时,子元素otherChild的高度就正常显示了。

parent设置固定高度后ie浏览器的显示效果

总的来说,ie真的好坑啊,暂时不知道原因,只好通过其他的局部方式来达到想要的效果。

如果有大神知道原因的,求指点。

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容