【css兼容】flex在低版本 chrome 浏览器的兼容问题

https://blog.csdn.net/weixin_43841308/article/details/111246537

前言
【感官】使用 Element UI 构建如下布局

【逻辑】具体代码：

【现象】

谷歌浏览器44.0.2403.125 m版本 显示main内容不全
谷歌浏览器57.0.2987.133版本 页面正常
flex 兼容性
【猜想】display：flex在网站兼容性问题

兼容查询网站

display：flex 在28以上，那么她在低版本浏览器上还有什么表现呢？
打开控制台，观察 main 的高度永远与最外层 div 的宽度一致，div 超过最外层隐藏
main 的高度设置为100%， 正常情况下，会与其父元素 bottom 的高度一致
在低版本chrome 浏览器会默认脱离文档流，其父元素变更为浏览器
解决
父相子绝： 父元素为相对布局，子元素为绝对布局
父容器（蓝色框）设置flex布局，盒子的摆列方向flex-flow， 子容器设置扩充 flex-grow：1
display：grid 替换，但注意 grid 布局也有兼容性问题
————————————————
版权声明：本文为CSDN博主「布噜布噜吐泡泡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43841308/article/details/111246537