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

前言

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

【逻辑】具体代码：

【现象】

1. 谷歌浏览器44.0.2403.125 m版本 显示main内容不全
2. 谷歌浏览器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 布局也有兼容性问题