记flex布局坑（包括IE11中）

IE11中

flex:1不生效

ie11中的flex-grow默认0，也就是flex:1 = flex:1 1 0。谷歌内核浏览器为xflex:1。 所以：
flex:1 改为 flex: 1 1 auto

min-height不生效

1、min-height外的父div需要设置成display:flex
2、此时min-height的div可能宽度会变小，需要设置width:100%
3、min-height如果时flex-column布局，min-height内部的子div如果设置了flex:1，会出现没有被内部元素撑开的情况，因此相应的子div需要设置 flex-shrink: 1

总结

flex:1 改为 flex: 1 1 auto
min-height的父div设置成display:flex，min-height元素设置width:100%
撑不开的子元素设置 flex-shrink: 1

通用flex

设置文字省略号显示，父元素flex布局被撑开

父元素 flex 布局，子元素有一行文字，将其设置为不换行隐藏后显示省略号，但实际并不是想象的那样，而导致布局变形。
这种情况是因为 flex 布局特性，子内容优先被内容撑开使得文字不隐藏。
解决：将该父元素的宽度设置为 0 ，并使用 flex：1 样式。