Как обернуть flex-элементы в IE11, когда они внутри таблицы?

Question

У меня есть следующий код ( codepen здесь ), который мне нужно заставить работать в 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> элементы для этого, во всяком случае.

Вам может потребоваться просмотреть фрагмент ниже в полноэкранном режиме, в зависимости от вашего разрешения, чтобы увидеть его укладку / упаковку. Не развернутое в IE на моем 26-дюймовом мониторе 1080p, оно показывает только один столбец из-за ограничений по максимальной ширине столбчатого макета сайта.

.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>