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

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 >
      <p>blah blah blah</p>
    </div>
  </div>

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

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

CodePudding user response：

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.

CodePudding user response：

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 >
<!--/* Tile 1 */-->
<div >
  <div >
    <p>blah blah blah</p>
  </div>
</div>

<!--/* Tile 2 */-->
<div >
  <div >
    <p>blah</p>
  </div>
</div>

<!--/* Tile 3 */-->
<div >
  <div >
    <p>blah blah blah blah blah blah blah blah blah</p>
  </div>
</div>

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

CodePudding user response：

Add min-height: inherit; to all flex children.

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

.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 >
      <p>blah blah blah</p>
    </div>
  </div>

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

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