最大宽度在带有显示的 IE11 中不起作用：table 容器和显示：flex 子项

Question

在下面的代码中，Chrome中的所有内容都正确显示。 .inner 元素的宽度受 max-width.

限制

在 IE11 中，.inner 元素扩展到所有内容。

如果我为 .container 或 .inner 元素设置 display: block 一切正常。但我不能这样做，因为这个例子是在许多网站上使用的大型组件中错误的简短再现，我不想破坏某些东西。

为什么会这样？
如何解决？

.container {
  background-color: yellow;
  display: table;
  height: 100px;
  max-width: 277px;
}

.inner {
  background-color: red;
  display: flex;
  height: 50px;
}

<div class="container">
  <div class="inner">77 777 777 77 7 7777 77 7 7 7 77 7 7 7 77 7 7 7 7 7 77 7 7 7 7 77 7 77 7 7 77 7 7 77 7 7 77 7 7 77 7 7 7 7 7</div>
  <div class="inner">111 11111 111111111111 111111111111 111111111 111111111111 11111111111 11111111111 11111111 1111111111 11111</div>
</div>

Answer 1

一般来说，您可以期待 problems with flexbox in IE11。

将 <table> 元素作为 flex 容器的父元素（通常 table 的子元素是 table 单元），你现在是在自找麻烦。

最后，添加，您只是在请求 IE11 破坏您的布局。

也就是说，问题的解决方案是在您的代码中添加两条规则：

 .container {
   width: 100%;              /* new */
   table-layout: fixed;      /* new */
   display: table;
   max-width: 277px;
   height: 100px;
   background-color: yellow;
 }

 .inner {
   background-color: red;
   display: flex;
   height: 50px;
 }

<div class="container">
  <div class="inner">77 777 777 77 7 7777 77 7 7 7 77 7 7 7 77 7 7 7 7 7 77 7 7 7 7 77 7 77 7 7 77 7 7 77 7 7 77 7 7 77 7 7 7 7 7</div>
  <div class="inner">111 11111 111111111111 111111111111 111111111 111111111111 11111111111 11111111111 11111111 1111111111 11111</div>
</div>

最大宽度在带有显示的 IE11 中不起作用：table 容器和显示：flex 子项

max-width not working in IE11 with display: table container and display: flex children

html

css

flexbox

internet-explorer-11