I have the following code which has four columns wrapped over 2 rows using flex. In chrome and firefox, this works perfectly with the first item taking it's own row and then the second row, all the items match the tallest in that row.
However in IE11, the items in the second row match the tallest item out of all 4 (rather than just on it's own row) meaning that there is a lot of white space created in the second row.
* {
box-sizing: border-box;
}
img {
display: block;
width: 100%;
}
.grid-container {
padding-left: 0;
padding-right: 0;
margin-right: 0;
margin-left: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 1 auto;
}
.grid-column {
padding-right: 12px;
padding-bottom: 24px;
padding-left: 12px;
flex-basis: 100%;
flex: 0 0 auto;
max-width: 100%;
margin-left: 0;
margin-right: 0;
flex-direction: column;
display: flex;
}
.grid-column:nth-child(1) {
min-width: 100%;
max-width: 100%;
}
.grid-column:nth-child(2) {
min-width: 50%;
max-width: 50%;
}
.grid-column:nth-child(3),
.grid-column:nth-child(4) {
min-width: 25%;
max-width: 25%;
}
.grid-column:nth-child(1) {
min-width: 100%;
max-width: 100%;
}
.widget-article {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.grid-column:nth-child(1) .widget-article {
flex-direction: row;
}
.widget-article__content {
background: #313B3D;
color: #ffffff;
flex-grow: 1;
}
.widget-article__content a {
color: #ffffff;
}<div class="grid-container grid-container--listing grid-container--full-half-quarter">
<div class="grid-column">
<div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
<div class="media-asset">
<a href="#">
<img src="http://via.placeholder.com/986x553" alt="">
</a>
</div>
<div class="widget-article__content">
<div class="widget-article__header">
<h3 class="widget-article__title">
<a class="widget-article__title-link" href="#">
Crash-tested landscape furniture: why functional will no longer do...
</a>
</h3>
</div>
<div class="widget-article__footer">
<div class="widget-article__meta">
<div class="widget-article__meta-left">
<div class="meta-details">
<div class="meta-details__author">
<p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
</div>
<div class="meta-details__date">
<p>MONDAY 5TH JUNE, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-column">
<div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
<div class="media-asset">
<a href="#">
<img src="http://via.placeholder.com/986x553" alt="">
</a>
</div>
<div class="widget-article__content">
<div class="widget-article__header">
<h3 class="widget-article__title">
<a class="widget-article__title-link" href="#">
Crash-tested landscape furniture: why functional will no longer do...
</a>
</h3>
</div>
<div class="widget-article__footer">
<div class="widget-article__meta">
<div class="widget-article__meta-left">
<div class="meta-details">
<div class="meta-details__author">
<p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
</div>
<div class="meta-details__date">
<p>MONDAY 5TH JUNE, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-column">
<div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
<div class="media-asset">
<a href="#">
<img src="http://via.placeholder.com/986x553" alt="">
</a>
</div>
<div class="widget-article__content">
<div class="widget-article__header">
<h3 class="widget-article__title">
<a class="widget-article__title-link" href="#">
Crash-tested landscape furniture: why functional will no longer do...
</a>
</h3>
</div>
<div class="widget-article__footer">
<div class="widget-article__meta">
<div class="widget-article__meta-left">
<div class="meta-details">
<div class="meta-details__author">
<p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
</div>
<div class="meta-details__date">
<p>MONDAY 5TH JUNE, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-column">
<div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
<div class="media-asset">
<a href="#">
<img src="http://via.placeholder.com/986x553" alt="">
</a>
</div>
<div class="widget-article__content">
<div class="widget-article__header">
<h3 class="widget-article__title">
<a class="widget-article__title-link" href="#">
Crash-tested landscape furniture: why functional will no longer do...
</a>
</h3>
</div>
<div class="widget-article__footer">
<div class="widget-article__meta">
<div class="widget-article__meta-left">
<div class="meta-details">
<div class="meta-details__author">
<p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
</div>
<div class="meta-details__date">
<p>MONDAY 5TH JUNE, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- / column -->
</div>Is there a way to make IE behave like chrome and firefox without changing the html structure?