前端--flex布局在ie11浏览器中使用flex-direction: column后子元素flex:1不生效的问题

flex布局在ie浏览器中flex-direction: column元素后子元素flex:1不生效的问题(父元素没有根据子元素的内容自动撑高高度)

flex: 1 是 flex-grow: 1;flex-shrink:1;flex-basis: 0%;的缩写

而情况就是chrome浏览器正常显示,ie浏览器不行;

但若是将chrome浏览器的改为 flex-grow: 1;flex-shrink:1;flex-basis: 0px;也出现和ie浏览器一样的情况

解决方法:

改成

flex: 1;

-webkit-box-flex:1;

-ms-flex: 1 1 auto;/*-ms-flex: 1 1 auto;等同于-ms-flex: auto;*/

或者

flex: 1

并且给父元素动态计算高度