IE 11 incorrect display flex-direction: column

user_8645964 0
Viewed 4868

I want:

  • .parent has height based on content, but with max-height
  • children have height based on content
  • .second has height based on content, but with respect to .parent max-height

But IE do problems. Other browsers work good.

HTML:

<div class=buggedFix>
 <div class=parent>
   <div class=first>...</div>
   <div class=second><div class=big>...</div></div>
   <div class=third>...</div>
 </div>
</div>

CSS:

/*.buggedFix{display:flex;}*/
.parent{display:flex;flex-direction: column;width:250px;max-height:200px;}
.first{background:pink;flex: 0 1 auto;}
.third{background:yellow;flex: 0 1 auto;}
.second{background:brown;flex: 1 1 auto;overflow: auto}
.big{background:red;height:600px;margin:10px}

Bad 1: https://jsfiddle.net/fpnjwp0j/3/
Bad 2: https://jsfiddle.net/j53ds1mb/3/

flexbox internet-explorer css html
1 Answers

Change the first and third rule's flex-shrink value to 0

Updated fiddle

Stack snippet

.buggedFix {
  display: flex;
}

.parent {
  display: flex;
  flex-direction: column;
  width: 250px;
  max-height: 200px;
}

.first {
  background: pink;
  flex: 0 0 auto;               /*  changed  */
}

.third {
  background: yellow;
  flex: 0 0 auto;               /*  changed  */
}

.second {
  background: brown;
  flex: 1 1 auto;
  overflow: auto
}

.big {
  background: red;
  height: 600px;
  margin: 10px
}
<div class=buggedFix>
  <div class=parent>
    <div class=first>This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. </div>
    <div class=second>
      <div class=big>parent max-height is ignored!</div>
    </div>
    <div class=third>This is OK. This is OK. This is OK. This is OK.</div>
  </div>
</div>

user_28278230
Related