Internet Explorer不会使用flex-direction：列扩展flexbox

Question

我正在尝试创建一个带有静态标头和一个根据其内容扩展到最大高度的主体的容器。达到最大高度后，身体应滚动。我编写的代码在Chrome / Firefox中运行良好，但是在IE中，容器无法正确展开。

div{
  border: 1px solid #DDD;
}

.container{
  max-height: 150px;
  display: flex;
  flex-direction: column;
}

.header{
  height: 40px;
}

.scroll{
  flex: 1;
  overflow: auto;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="scroll">
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
  </div>
</div>

如果我flex-direction: row;改用，高度会适当扩展，但是显然我的标题看起来不合适。

是否有一种变通方法，以使具有标题和滚动体的不断增长的容器可与IE11和Edge一起使用？我不反对在必要时放弃flexbox。

Answer 1

看来这段代码在 Chrome、Firefox 和 Edge 中按预期工作。问题似乎是 IE11。

这是一种似乎适用于所有四种浏览器的解决方案：

• 使body元素成为弹性容器。
• 对原始代码进行一项调整（添加width: 100%）。

html {
  height: 100%;
}
body {
  display: flex;
  height: 100%;
  margin: 0;
}
.container {
  max-height: 150px;
  display: flex;
  flex-direction: column;
  width: 100%;  /* adjustment */
}
.header {
  height: 40px;
}
.scroll {
  flex: 1;
  overflow: auto;
}
div {
  border: 1px solid #DDD;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="scroll">
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
  </div>
</div>

js小提琴