flex-basis：自动在IE11中不起作用

Question

我有3个具有不同宽度的div，我想使用flexbox缩小到容器。

摆弄小提琴： https : //jsfiddle.net/easyNick/1m8ude39/14/

CSS看起来像这样：

.child {
 order: 0;
 flex-grow: 0;
 flex-shrink: 1;
 flex-basis: auto;
 min-height: auto;
 min-width: auto;
 align-self: auto;
 position: relative;
 display: block;
 padding: 0 0.25rem;
}

在Chrome浏览器中非常有效。

但是IE 11认为flex-basis是宽度，而最后一个div甚至不适合容器：

.child {
 order: 0;
 flex-grow: 0;
 flex-shrink: 1;
 width: auto;
 min-height: auto;
 min-width: auto;
 align-self: auto;
 position: relative;
 display: block;
 padding: 0 0.25rem;
}

我发现了一些将flex-basis设置为某个百分比数字的建议。 但是100％不能满足我的需求。

设置特定值会使布局不灵活。

有什么帮助的想法吗？

Answer 1

Flex-basis 无法在IE11上使用 。

但是您可以使用此CSS规则定位flex-basis属性。 试试这个

_:-ms-fullscreen, :root .IE-FlexAuto {
  flex-basis: auto;
}