浏览器兼容性专题一 在火狐浏览器下父级为flex:1的布局中el-table无限被拉伸

今天在火狐浏览器下演示自己的vue项目，发现使用的element-ui中的table表格在伸缩布局中flex:1属性下存在表格无限拉伸的现象。被人鄙视了一把，心里哪个滋味呀，你懂的。。。

话不多说，上现象

老弟你这是要去哪里，现在疫情这么严重，不让出门不知道吗？

查询资料后，发现伸缩布局在火狐浏览器下存在兼容性问题，而在谷歌浏览器下是可以正常显示的。

解决方法

1.在flex:1的元素上添加position:relative css属性

.container {
  position: relative;// 添加此条属性
  flex: 1;
  width: calc(100% - 280px);
  background-color: #fff;
}

2.在table元素的外边套一个div的外壳，然后添加如下属性

div {
  position: absolute;
  width: 100%; 
}

3.再次浏览

一切显示正常。

原因

flex容器下的width:100%会一直向上继承，直到flex容器下第一级子元素，但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候，那么容器就不会收缩了。