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

Issue

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>

Solution

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

Answered By - spidey677