'CSS: Flex doesn't keep same height for divs in IE11

I’m currently using display: flex; to display 3 tiles that adjusts and keeps the same height based on which tile has the most content in it.

The below HTML/CSS works in all browsers except IE11 & I can’t figure out why.

I tried adding min-height: 100vh; to my richTextOne class but that keeps the height of all the containers the same & also blows up the height so it’s not what I’m looking for.

min-height: inherit; to my richTextOne class makes the containers not all have the same equal height. The height in each tile div goes as far as how much content is in it.

Any help is gladly appreciated.

Thanks!

.flex-box {
  width: 100%;
  min-height: 345px;
  display: flex;
  flex-direction: row;
}

.tile {
  display: flex;
  flex-direction: column;
  width: 348px;
  padding-bottom: 0px;
  margin-left: 1px;
  margin-right: 61px;
}

.richTextOne {
  flex: 1 auto;
  padding-top: 35px;
  padding-left: 24px;
  padding-right: 11px;
}
<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class=“flex-box”>
  <!--/* Tile 1 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah</p>
    </div>
  </div>

  <!--/* Tile 2 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah</p>
    </div>
  </div>

  <!--/* Tile 3 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah blah blah blah blah blah blah</p>
    </div>
  </div>
</div>
htmlcssinternet-explorerflexbox


Solution 1:[1]

On my flex-box div I needed to add align-items: stretch; in order for the child divs to be equal height. Thanks All!

Solution 2:[2]

There is a raft of bugs in IE11 related to flex.

See https://caniuse.com/?search=flex

In particular what seems to be relevant to your code:

In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.

Solution 3:[3]

I don't have internet explorer 11 on my system, but I noticed that you fixed the width of tiles etc so if the page is resized it'll go out-of-place.

Test my code below and see if it works on ie11

<style>

    *, *::after, *::before {
        box-sizing: border-box;
    }

    .flex-box {
    width: 100%;
    min-height: 345px;
    display: flex;
    flex-direction: row;
    }

    .tile {
        display: inline-block;
        width: 33%;
        padding-bottom: 0px;
        margin-left: 1px;
        margin-right: 61px;
        background-color: #e2e2e2;
    }
        .tile:last-child {
            margin-right: 0;
        }

    .richTextOne {  
        padding: 1rem;
        display: block;
    }

</style>

<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class="flex-box">
<!--/* Tile 1 */-->
<div class="tile">
  <div class="richTextOne">
    <p>blah blah blah</p>
  </div>
</div>

<!--/* Tile 2 */-->
<div class="tile">
  <div class="richTextOne">
    <p>blah</p>
  </div>
</div>

<!--/* Tile 3 */-->
<div class="tile">
  <div class="richTextOne">
    <p>blah blah blah blah blah blah blah blah blah</p>
  </div>
</div>

If you have any questions, please don't hesitate to ask.

Solution 4:[4]

Do you mean tiles in IE don't obey min-height: 345px? Except this, I don't find other issues in IE 11.

If you mean the min-height issue, you can refer to this doc. The fix is add a flex column wrapper around the flex-box:

.flex-box {
  width: 100%;
  min-height: 345px;
  display: flex;
  flex-direction: row;
}

.tile {
  display: flex;
  flex-direction: column;
  width: 348px;
  padding-bottom: 0px;
  margin-left: 1px;
  margin-right: 61px;
}

.richTextOne {
  flex: 1 auto;
  padding-top: 35px;
  padding-left: 24px;
  padding-right: 11px;
}
<div style="display: flex; flex-direction: column;">
  <div class="flex-box">
    <!--/* Tile 1 */-->
    <div class="tile">
      <div class="richTextOne">
        <p>blah blah blah</p>
      </div>
    </div>

    <!--/* Tile 2 */-->
    <div class="tile">
      <div class="richTextOne">
        <p>blah</p>
      </div>
    </div>

    <!--/* Tile 3 */-->
    <div class="tile">
      <div class="richTextOne">
        <p>blah blah blah blah blah blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>

Solution 5:[5]

Add align-items: stretch; to your flex parent.

.flex-box {
  width: 100%;
  min-height: 345px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.tile {
  display: flex;
  flex-direction: column;
  width: 348px;
  padding-bottom: 0px;
  margin-left: 1px;
  margin-right: 61px;
  height: 100%;
}

.richTextOne {
  flex: 1 auto;
  height: 100%;
  padding-top: 35px;
  padding-left: 24px;
  padding-right: 11px;
}
<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class=“flex-box”>
  <!--/* Tile 1 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah</p>
    </div>
  </div>

  <!--/* Tile 2 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah</p>
    </div>
  </div>

  <!--/* Tile 3 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah blah blah blah blah blah blah</p>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 spidey677
Solution 2 A Haworth
Solution 3 DreamCode
Solution 4 Yu Zhou
Solution 5

Related Questions