IE11 flex-direction: column breaks float column

On this page, I’m using flex-direction: column, which works well with other browsers except IE11. I know that there is a known bug with IE11, but I’m wondering if there’s a fix for this?

You might find that fixing some of the validation errors might help @toad78

1 Like

I think the main problem is the align-items confusing IE11.

Try this:

.full-width-bg-gradient .grad-right-content, .full-width-bg-gradient .grad-left-content {
    align-items:inherit;
}

You do also have the width bug but I don’t have time to debug at the moment as it may be a number of things. I’ll try and look later.

However I think the main problem is the over-use of flex box for something that could be done with display:table much easier and back to IE8 without problems. Keep it simple and only use flexbox when really needed if IE11 support is important.

Looks like you need an overflow:hidden here to stop IE11 stretching wide.

#header-image{overflow:hidden}

Thank you, PaulOB, for looking into this. The ‘inherit’ option definitely fixed the issue. I think in the long run, until all browsers can catch up, maybe I should just stick with the display: table method.

Thank you!

There is one other thing that I noticed that IE10 doesn’t like. In the Blue ‘Intuit TurboTax’ box, the text is not formatting centered vertically. I’m assuming it’s because of the min-height bug.

Yes IE will only center if you have a fixed height. You could change the min-height to height instead and then use media queries at points where the text wraps to a greater height (or make the text smaller so the height isn’t breached).

That is a classic example where display table / cell would have no problems as height is treated as a minimum when you use display:table. You also get vertical alignment thrown in easily also.

I would have considered using this except I didn’t build it. I was asked to just ‘fix’ the problem. Until browsers catch up, display: table will have to continue to be used.

When it comes to IE, it’s more a case of waiting for them to die out, not catch up. Though IE11 is still supported by MS for now at least.
If display table can do the job, why not? Flexbox is great, but display table can do a fair bit of what it does. Flexbox is really needed when you want elements to wrap or swap order or more clever stuff.

I ran into the IE min-height bug a couple of weeks ago too.
What I found was that nested flex items seem to trigger the bug. Moving the min-height rule from the parent to the effected child can solve the issue.

Actually, only one of the children need the min-height in place, then the other child will follow along. In this case they both share the same class for their 50% width.

Keeps you from needing fixed heights.

This fixes it for me in IE11

.col-sm-6 {
    min-height:400px
}

Thanks Ray.H. That works well for IE11, but IE10 still doesn’t see it as centered.

IE10 was officially killed off as of January this year - so anything that doesn’t work there will never work there. There should be very few people still using it as most will have already upgraded to IE11.

Is it really worth the effort?

IF it is, then use display:table/table-cell and be done with it.

Really worth the effort? Not in my book.

Yes, I agree. Apparently this project needs to cater to that ‘few’.

So you need to cater to people that Microsoft completely abandoned over six months ago - how much bigger is your company than Microsoft that you need to do that?

If your answer is not on this page, then it does not exist.

Actually the bug is evident from the get go :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	display:flex;
	min-height:600px;
	background:red;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.item {
	padding:10px;
	background:blue;
}
</style>
</head>

<body>
<!-- ie11 bug won't vertically align with min-height -->

  <div class="wrap">
    <div class="item">test</div>
  </div>

</body>
</html>

Your comments however do lead to a solution in that for IE11 to work with min-height it needs a parent that is display:flex (with default of flex-direction:row) and the current element changed to column and then the min-height takes effect.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.outer{display:flex;}
.wrap {
	display:flex;
	min-height:600px;
	background:red;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	width:100%;
}
.item {
	padding:10px;
	background:blue;
	margin:0;
	width:300px;
}
</style>
</head>

<body>
<div class="outer">
  <div class="wrap">
    <p class="item">This item is vertically centered in IE11 avoiding the min-height bug. It uses a nested wrapper set to flex-direc tion-column and then it will center vertically.</p>
  </div>
</div>
</body>
</html>

The above is vertically centred in IE11. I can’t test a real IE10 and indeed IE10 is a dead browser as virtually no one used it. Its usage is less than the older IE browsers.

It will work for 2 blocks in the same way.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.outer{display:flex;}
.wrap {
	display:flex;
	min-height:600px;
	background:red;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	width:50%;
}
.item {
	padding:10px;
	background:blue;
	margin:0;
	width:300px;
}
</style>
</head>

<body>
<div class="outer">
  <div class="wrap">
    <p class="item">This item is vertically centered in IE11 avoiding the min-height bug. It uses a nested wrapper set to flex-direc tion-column and then it will center vertically.</p>
  </div>
  <div class="wrap">
    <p class="item">This item is vertically centered in IE11 avoiding the min-height bug. It uses a nested wrapper set to flex-direc tion-column and then it will center vertically.</p>
  </div>
</div>
</body>
</html>

Now that I look around I see others have already [found this solution] (http://codepen.io/chriswrightdesign/pen/emQNGZ/) out.:slight_smile:

This is amazing insight and better understanding of IE’s behavior with the use of ‘flex’, PaulOB. This is definitely going into my ‘Must Know’ list.

Thank you for your hard work, PaulOB and the Kudos to the rest of the Sitepoint gang!

Hi Paul,
I believe that was the situation I had going on which led me to my finding. I found myself having to change flex directions anyway (because of content above my images) to get my example to work in IE11 all browsers.

Lo and behold I also ran into that overflow bug (I was calling it a flex wrap bug) and width:1%; was a fix for that.

Reminded me of the old IE8 sticky footer bug which was fixed with height:1%;/*fix IE8 min-height:100% bug (Erik.J)*/

I’m still new to this flex layout and those IE bugs caught me off guard. :slight_smile:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gallery | 2-Column Flexbox</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
h2 {
    background: #fff;
    margin: .5rem;
    text-align: center;
}
p {
    margin: .5em .5em 0;
    background: #fff;
}
ul {
    margin: .5em;
    padding: 0;
    list-style: none;
}
.inner {
    /*min-height: 600px;/*needed on child for ie11*/
    max-width: 960px;
    margin: .75em auto;
    background: #eee;
    border: 1px solid;
    display: flex;
    flex-flow: row nowrap; /* flex-direction and wrap */

}
.sidebar {
    min-height: 600px;/*needed on child for ie11*/
    display: flex;
    flex-flow: column wrap; /* flex-direction and wrap */
    flex: 0 0 180px; /* don't grow, don't shrink, retain width */
    background: #ccc;
    border-right: 1px solid;
}
    nav {
        padding: .5em;
        background: wheat;
    }
    aside {
        min-height: 80px;
        background: greenyellow;
    }
    aside.bottom {
       margin-top: auto;
    }
main {
    display: flex;
    flex-flow: column wrap; /* flex-direction and wrap */
    min-width: 1%; /* ie 11 flex-wrap bug fix */
}
main ul {
    display: flex;
    flex-flow: row wrap; /* flex-direction and wrap */
    justify-content: center;
    align-content: center;
    flex: auto;
    background: yellow;
}
main li {
    margin: 1em;
    min-width: 80px;
    min-height: 80px;
    background: greenyellow;
}
/*==== Media Queries ====*/
@media screen and (max-width: 780px) {
    .sidebar { flex: 0 0 140px; } /* don't grow, don't shrink, retain width */
}

@media screen and (max-width: 600px) {
    .inner {flex-wrap: wrap;}
    main, .sidebar {flex: 1 0 100%}
    .sidebar {border: none; min-height: auto;}
    aside {display: none;}
    nav li {display:inline-block;}
}

@media screen and (max-width: 500px) {

}
</style>
</head>
<body>

    <div class="inner">
        <div class="sidebar">
            <nav>
                <button id="toggler">Menu</button>
                <ul class="menu">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                    <li><a href="#">Link 6</a></li>
                </ul>
            </nav>
            <aside>
                <p>aside content at top</p>
            </aside>
            <aside class="bottom">
                <p>aside content at bottom</p>
            </aside>
        </div>
        <main>
            <h2>H2 Page Specific Heading</h2>
            <p>main content text</p>
            <p>main content text</p>
            <p>main content text</p>
            <p>main content text</p>
            <ul>
                <li><a href="#">Image 1</a></li>
                <li><a href="#">Image 2</a></li>
                <li><a href="#">Image 3</a></li>
                <li><a href="#">Image 4</a></li>
                <li><a href="#">Image 5</a></li>
                <li><a href="#">Image 6</a></li>
                <li><a href="#">Image 7</a></li>
                <li><a href="#">Image 8</a></li>
                <li><a href="#">Image 9</a></li>
            </ul>
        </main>
    </div>

</body>
</html>