CSS 浏览器兼容性
【2020-11-06】flex #
为了让 flex 子元素占据剩余空间同时不被内容撑开，我们一般这样设置：
flex: 1;
width: 0
1
2
2
但在 firefox 浏览器中并未生效，子元素被内容撑开了，查阅 MDN可知：默认情况下，元素不会缩短至小于内容框尺寸，若想改变这一状况，请设置元素的min-width 与 min-height属性。因此可设置：
/* 宽 */
flex: 1;
width: 0;
min-width: 0;
/* 高 */
flex: 1;
height: 0;
min-height: 0;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
经测试，等价于：
/* 宽 */
flex: 1;
overflow-x: hidden;
/* 高 */
flex: 1;
overflow-y: hidden;
1
2
3
4
5
6
7
2
3
4
5
6
7