Question

我想：

.parent具有基于内容的高度，但具有max-height
儿童根据内容有高度
.second具有基于内容的高度，但是相对于.parent max-height

但是IE会出问题。其他浏览器效果很好。

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}

坏1：https://jsfiddle.net/fpnjwp0j/3/
差2：https://jsfiddle.net/j53ds1mb/3/

Answer 1

将first和third规则的flex-shrink值更改为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>

IE 11错误显示flex-direction：列

1 个答案: