How to wrap flex items in IE11 when inside table?

Question

I have the following code (codepen here), that I need to make work in IE11 (because it works in normal browsers)...

The cards should be wrapped (no horizontal scoll, only vertical if needed) into the displayed window..

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

this is not the case of the IE.

I know without the wrapping "table" this will work, but I can't change it, so please consider keeping the table as is...

Answer 1

Adding table-layout: fixed; width: 100%; to the parent .table wrapper fixes this for me in IE11. However, I would recommend not placing something in a table layout unless you need to display tabular content... and you really want to use semantic <table> elements for that, anyway.

You may have to view the Snippet below in full screen depending on your resolution in order to see it stacking/wrapping. Un-maximized in IE on my 26" 1080p monitor, it only shows a single column due to the max-width constraints of the site's columnar layout.

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