Kathryn Crawford Kathryn Crawford -4 years ago 118
CSS Question

Flexbox grid misaligned in IE10/11

I have a 2x2 grid next to one big image that I need to line up. (here's a codepen) I used a combination of Bootstrap 3.3.7 and Flexbox and it looks great in everything BUT IE (go figure). I'm just beating my head against a wall trying to fix this.

I've got everything for the 2x2 grid positioned in a row like so.

<div class="row || flex-row">
<div class="col-xs-12 || col-md-6 || core-values-left">
<div>
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corevaluesmain-1.jpg">
</div>
</div>

<div class="col-xs-12 || col-md-6 || core-values-right">
<div class="row">
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopleft.jpg">

<h4 class="core-values-heading">We Scout</h4>

<div class="core-hover">
<h5>We are a talent scout and agent for the grocery industry</h5>
<div>
<a href="http://www.google.com" class="btn || btn-secondary || hover-btn">Learn more</a>
</div>
</div>
</div>
</div>

<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopright-1.jpg">

<h4 class="core-values-heading">We Discover</h4>

<div class="core-hover">
<h5>We seek out new CPG opportunities and innovations</h5>
<a href="http://www.google.com" class="btn || btn-secondary || hover-btn">Learn More</a>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomleft.jpg">

<h4 class="core-values-heading">We Grow</h4>

<div class="core-hover">
<h5>We expand your brand’s horizons and elevate your success</h5>
<a href="http://www.google.com" class="btn || btn-secondary || hover-btn || hover-btn">Learn more</a>
</div>
</div>
</div>

<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomright.jpg">

<h4 class="core-values-heading">We Champion</h4>

<div class="core-hover">
<h5>We value our client relationships and always go the extra mile</h5>
<a href="http://www.google.com" class="btn || btn-secondary || hover-btn">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>


Then I applied this css to the row and columns to line it up with flex. Works like a charm....except in IE

.flex-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.flex-row > [class*='col-'] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }


Things I've tried:


  • Adding min-height to the columns

  • Wrapping the rows in another div to
    make them non-flex containers

  • Explicitly setting flex: 1 1 0% on the
    rows and the columns

  • Rubbing a magic lamp and summoning a genie to
    fix my problem



Does anyone has a clue what might be happening??? I hate IE so much.

Answer Source

First you have IE, which does everything it can to prevent coding from being fun or easy...

Then you have the many flexbox-related bugs in IE10 and IE11...

Add to that the multiple bugs related to flex-direction: column...

Then finally throw images into flex items (an entirely different set of challenges and inconsistencies)...

And you're pretty much guaranteed to find trouble.

My suggestion would be to switch the flex container from column to row. This should make your layout easier to handle by IE browsers.

Try these adjustments:

.flex-row > [class*='col-'] {
    display: flex;
    /* flex-direction: column; */
    flex-direction: row; /* new */
    flex-wrap: wrap; /* new */
    align-content: space-between; /* new */
}
.core-values-left > div {
    flex: 1; /* new */
}

revised codepen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download