IE11 flex-direction: column breaks float column

HTML & CSS
21

There are more bugs listed here:

22

Yes, I see that now and it is duly noted! :slight_smile:

“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”

I’m not seeing that changing the flex direction to column has anything to do with getting min-height to work in IE11. Of course, a complex layout could introduce more variables to the situation.

The only key ingredient I see is at least one extra wrapping div or an existing sibling element (the sidebar in my example above) to hook the min-height to. Then IE11 will align-items and obey flex layout rules on the cross axis.

You only need one wrapping div to get multiple elements to align. Multiple wrapping divs with min-height will cause excess scrolling and blank space when they flex-wrap.

Working off of the example code you posted above. The following code uses one extra wrapping div with flex-flow: row wrap; and multiple elements nested. Seems to work fine in IE11.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.outer {
    display: flex;
    background:red;
}
.wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
    min-height: 250px;
    width:100%;
}
.item {
    width: 25%;
    margin: 10px;
    padding: 10px;
    background: lightblue;
}
.tall:hover {
    padding: 150px 10px;
}
.end {
    align-self: flex-end;
}
</style>
</head>

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

<div class="outer">
    <div class="wrap">
        <div class="item tall">hover to add height</div>
        <div class="item">test</div>
        <div class="item end">align-self: flex-end</div>
    </div>
</div>

</body>
</html>
1 Like
24

Yes you are right and I think I may have seen this behaviour in a more complex situation but am unable to reproduce it at the moment. It seems as though it’s just the parent wrapper with display:flex that’s needed.:slight_smile:

It looks as though IE11 is a little buggy in all aspects of flex and if IE11 support is needed then that should be the browser that you develop your flex layouts with so that you don’t get too far down the road only to realise its not working. There seem to be enough ‘fixes’ to get most basic layouts working in IE11.

25

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.