在IE11中，为什么这个弹性项目不会根据其容器的高度而改变？

Question

这个问题与我以前的一个问题几乎相同，但它特别关注IE11，因为上一个问题的答案适用于所有其他浏览器。 IE11是一个特例，因为它有很多flexbox错误，因此是新问题。

我想发生什么

我有一个.box，其高度被限制在视口内。在此元素中嵌套了几个级别我有.content-body，其中包含标题和.content项。当.content的高度足够小时，我希望只有.box缩小（显示滚动条）。

发生了什么

仅在IE11中，它会被切断，因为内容不想缩小。

守则

我做了一个CodePen来证明这个问题。只需调整浏览器的高度，观察内容元素的响应方式。下面是StackOverflow上用于后代的相同代码。理想的解决方案将使其在所有其他浏览器上保持相同，但为IE11修复它。

/* the most relevant rules to the problem */

.container{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
  display: flex;
  flex-direction: column;
  max-height: calc( 100vh - 50px );
  position: relative;
  overflow: hidden;
}

.box-body { 
  display: flex;
  flex-flow: column;
  min-height: 0;
}

.content-body{
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.content{
  overflow: auto;
}

/* other stuff (appearance mostly) that probably doesn't matter */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box{
    /* appearance */
  width: 600px;
  border-radius: 20px;
  border: 1px solid #bbb;
}
.box-body{
    /* appearance */
  padding: 20px;
  font-family: sans-serif;
  font-size: 18px;
}

.content-header{
  /* appearance */  
  background: #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

.box-label {
  /* appearance */
  padding: 30px 10px;
  background: teal;
  color: white;
  font-family: sans-serif;
  font-size: 20px;
}

.content{
  padding: 10px;
}

p {
  margin: 10px 0px;
}

<div class="container">

  <div class="box">

    <div class="box-label">
      Header
    </div>

    <div class="box-body">

      <div class="content-body">
        <div class="content-header">
          Content Header
        </div>
        <div class="content">
          <p>Mr do raising article general norland my hastily. Its companions say uncommonly pianoforte favourable.</p>

          <p>On projection apartments unsatiable so if he entreaties appearance. Rose you wife how set lady half wish. Hard sing an in true felt. Welcomed stronger if steepest ecstatic an suitable finished of oh. Entered at excited at forming between so
            produce.</p>

          <p>Answer misery adieus add wooded how nay men before though. Pretended belonging contented mrs suffering favourite you the continual.</p>
        </div>
      </div>

    </div>

    <div class="box-label">
      Footer
    </div>

  </div>

</div>

Answer 1

IE要求为滚动定义height属性。如果您将max-height的{​​{1}}更改为height元素，它也可以在IE中使用。