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

Добавление 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>