flex与height:100%的小坑

2,812 阅读1分钟

flex布局相信大家早已经非常熟悉,在工作中也经常用到,确实非常好用,但作者今天就遇到了一个怪坑,分享给大家。

flex布局

这是我的布局内容,这样分别设置左右两边的内容宽度与map的高度,发现在谷歌浏览器上60版本时map的高度设置没有生效,而在我的谷歌80版中却没有这样的问题,检查后发现是因为父级容器的高度是flex计算得出的,本身没有height属性,因此无法使用100%给map设置高度*(在较低版本)

大家可以看看下面: 这个高度是灰色的,代表不能被子容器继承,是计算而来的。不知道为啥高版本就能继承上了,这不是坑人呢吗?

别人的解释
https://segmentfault.com/q/1010000004603784