弹性基础：自动在 IE11 中不起作用答案

【问题标题】：flex-basis: auto doesn't work in IE11弹性基础：自动在 IE11 中不起作用
【发布时间】：2019-01-03 03:54:20
【问题描述】：

我有 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% 不能满足我的需要。

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

您有什么想法可能会有所帮助吗？

【问题讨论】：

能否请您粘贴一些小提琴，因为我可以重现问题
把小提琴变成了小提琴：jsfiddle.net/easyNick/1m8ude39/14
我认为问题在于输入，尝试调整输入的宽度或显示属性。我没有 IE11，所以我无法测试但试一试
这很奇怪，首先IE11无法打开jsfiddle.net，所以我将您的代码复制到jsbin。那里一切正常here 你可以检查一下。我刚刚删除了一些默认情况下应该具有相同值的 css。
是的，jsFiddle no longer supports IE。 Codepen 在 IE 中也失败了。请改用 JSBin.com。也就是说，您的代码似乎在带有 JSBin 的 IE 中运行良好。

标签： html css internet-explorer flexbox internet-explorer-11

【解决方案1】：

Flex-basiswont work on the IE11.

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

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

【讨论】：

我应该以某种方式调整这个css选择器_:-ms-fullscreen, :root .IE-FlexAuto吗？
@nick722，最后的类可以改成你喜欢的任何选择器。