IE11 flex issues with wrapping content - css

Question

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?

Answer 1

You can replace flexbox for most elements except .container using display: table. Result:
* {
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;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.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: table;
height: 100%;
}
.widget-article > * {
display: table-row;
}
.grid-column:first-child .widget-article > * {
display: table-cell;
vertical-align: top;
}
.widget-article__content {
background: #313B3D;
color: #ffffff;
height: 100%;
}
.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>

Answer 2

The problem in IE11 is that it uses the intrinsic height of the image.
Although you've set the width of the image containers:
.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%;
}
... which is enough to get the layout to work in Chrome and Firefox, these rules are not enough to alter the image's natural dimensions in IE11.
So consider adding something like this to your code:
/* pixel units for illustration purposes only */
.grid-column:nth-child(2) img {
height: 250px;
}
.grid-column:nth-child(3) img,
.grid-column:nth-child(4) img {
height: 125px;
}
jsFiddle demo
Percentage heights are probably preferable to pixels, but that will take some work setting heights on ancestors. Since I don't know exactly what you want, I just used pixels for the demo. There may also be other sizing options you can use.
But the bottom line is, you need to override the intrinsic dimensions of the image for the layout to work in IE11.