Pete
Reputation: 58432
IE11 flex issues with wrapping content
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?
Upvotes: 4
Views: 478
Answers (2)
Michael Benjamin
Reputation: 371231
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;
}
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.
Upvotes: 1
Vadim Ovchinnikov
Reputation: 14012
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>Upvotes: 1
Related Questions
- Text in a flex container doesn't wrap in IE11
- Flex-wrap does not wrap items in IE11
- flexbox text wrap on Internet Explorer 11 (IE11)
- Wrapping flex items in IE11 is broken
- IE10 Flexbox P element non-wrapping
- Text doesn't wrap in IE 10 when using flexbox
- Flexbox not wrapping in Firefox and IE11
- Text not wrapping in flex IE10
- Flex div not wrapping text in IE11 but in Chrome, FF and Opera
- Flexbox issues with IE 11