IE11 Flex 容器在表内时溢出答案

【问题标题】：IE11 Flex Container Overflows When Inside TableIE11 Flex 容器在表内时溢出
【发布时间】：2020-09-12 22:46:11
【问题描述】：

在 IE11 和 Google Chrome 中查看以下代码示例。

在 Chrome 中，它按我的预期显示，但在 IE11 中，表格扩展得比包含块宽得多。这似乎是由 display: flex 引起的 - 删除 display、flex-direction 和 justify-content 样式会使所有内容弹回原位。

我希望 IE11 以与 Google Chrome 相同的方式显示我的内容。如果可能的话，我强烈希望不需要更改标记。

我遇到了许多其他处理与 IE 相关的 flexbox 错误的问题，他们都建议更改各种 flex 属性，但我没有尝试过改变效果。在div.flex * 上设置max-width 确实有效，但如果可能的话，我宁愿保持这种动态。

<html>

<body>
  <style>
    div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
  </style>
  <div class="wrapper">
    <div class="flex">
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
    </div>
    <table class="wrapper-table">
      <tbody>
        <tr>
          <td>
            <div class="flex">
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

【问题讨论】：

标签： html css flexbox internet-explorer-11

【解决方案1】：

您说过“移除 display、flex-direction 和 justify-content 样式会使所有内容重新回到原位。”

如果你可以识别IE浏览器并应用特定的样式，那么你可以参考这个例子。

<html>

<body>
  <style>
@supports not (-ms-high-contrast: none) {
    div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
}

  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
     
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
}
  </style>
  <div class="wrapper">
    <div class="flex">
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
    </div>
    <table class="wrapper-table">
      <tbody>
        <tr>
          <td>
            <div class="flex">
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

输出：

这样，您无需对标记进行任何更改，您将在 IE 浏览器中获得类似的输出。

此外，您可以根据自己的要求修改代码。

【讨论】：

谢谢，这似乎工作得很好。我会暂时保留这个问题，看看其他人是否有洞察力 - 我很想知道为什么会出现这个特定的错误。如果不是，这个解决方案可以很好地满足我的需求，感谢您抽出时间来回答！
如果您认为上述建议有助于解决问题，那么我建议您接受它作为对这个问题的回答。它可以在未来帮助其他社区成员。感谢您的理解。
嗨，Deepak - 在接受答案之前等待一天是个好习惯，所以我想至少给它那么长时间。如果没有其他答案，我会接受这个答案是正确的:)