在表内时如何在IE11中包装flex项？

Question

我有以下代码（codepen here），我需要在IE11中工作（因为它可以在普通浏览器中工作）...

卡片应包装在显示的窗口中（无水平折线，如果需要，仅垂直折线）。

.table {display: table;}
.container {display: flex; flex-wrap: wrap;}

.card {width: 300px; height: 100px; background: green; margin: 2px;}

<div class="table">
<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>
  <div class="card">7</div>
  <div class="card">8</div>
</div>
</div>

不是IE的情况。

我知道没有包装的“表”会起作用，但是我无法更改它，因此请考虑将表保持原状...

Answer 1

在父table-layout: fixed; width: 100%;包装器中添加.table可以在IE11中为我解决此问题。但是，我建议不要在表格布局中放置任何内容，除非您需要显示表格内容...而且您确实想为此使用语义<table>元素。

根据分辨率，您可能需要全屏查看下面的代码片段，才能对其进行堆叠/包装。在我的26英寸1080p显示器上，IE中未最大化，但由于网站的列式布局的最大宽度限制，它只显示了一列。

.table {display: table; table-layout: fixed; width: 100%; }
.container {display: flex; flex-wrap: wrap;}

.card {width: 300px; height: 100px; background: green; margin: 2px; }

<div class="table">
    <div class="container">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
        <div class="card">4</div>
        <div class="card">5</div>
        <div class="card">6</div>
        <div class="card">7</div>
        <div class="card">8</div>
    </div>
</div>