Flexbox 最小宽度在 IE 11 中被破坏答案

【问题标题】：Flexbox min-width broken in IE 11Flexbox 最小宽度在 IE 11 中被破坏
【发布时间】：2018-12-08 15:50:15
【问题描述】：

我使用库react-toastify 在我的应用程序中显示祝酒词。默认情况下，吐司有width: 320px。由于有时没有足够的空间容纳一个单词并且该单词的一部分没有显示，我尝试使用这个 css 来调整 toast 的大小：

div.toast-resize {
  width: auto;
  max-width: 500px;
}

这在 Chrome 中有效，但不幸的是在 IE 11 中无效。在 IE 中，toasts 总是有min-width。我认为原因是 toastify 使用了 flexbox。不幸的是，this 和 this 解决方法都不起作用。我创建了以下示例。 .Toastify*-规则不能更改，div.toast-resize是我自己的规则。

如何让这个在 IE 和 Chrome 中看起来一样？

.Toastify__toast-container {
  position: fixed;
  width: 320px;
}
.Toastify__toast {
  margin-bottom: 1rem;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.Toastify__toast--success {
  background: #07bc0c;
}
.Toastify__toast-body {
  flex: 1 1;
}

div.toast-resize {
  width: auto;
  max-width: 500px;
  min-width: 100px;
}

<html>
  <body>
    <div class="Toastify">
      <div class="Toastify__toast-container Toastify__toast-container--top-right toast-resize">
        <div class="Toastify__toast Toastify__toast--success">
          <div class="Toastify__toast-body" role="alert"
            >Very long text with loooooooooooooooooooooooooooooooooooooooooooong word</div>
        </div>
        <div class="Toastify__toast Toastify__toast--success">
          <div class="Toastify__toast-body" role="alert">Short text</div>
        </div>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

当我在 chrome 中运行你的代码时，两个 div 的最大宽度都是 500px。我认为你的想法是在这个例子中，第一个 div 在达到最大宽度和中断时停止增长，第二个保持在 100px 的最小宽度，因为它有足够的空间来显示其中的文本？目前两者都有 500px 宽度
目前最长元素的宽度是所有元素的宽度。也许将宽度修复设置为 500 像素确实更容易。

标签： css internet-explorer flexbox

【解决方案1】：

您可以在.toast-resize 类中使用min-width，与max-width 相同。它强制每个设备中的 div 精确为 500px。

div.toast-resize {
  min-width: 500px;
  max-width: 500px;
}

【讨论】：

我不想让吐司的大小一样，因为有时文字很短。但如果没有更好的解决方案，也许我应该这样做。
如果你使用width:auto;，那么它将在max-width的顶部首先使用min-width