html - chrome v43 中具有最大高度的 Flex box 错误

Question

我有以下构造来呈现具有固定页眉和页脚的简单布局以及具有可滚动内容的灵活主体:http://jsbin.com/jokevuyave/1/edit?html,css

<div id="main-view">
  <div class="rows">
    <div class="head">header</div>
    <div class="main scroll"></div>
    <div>footer</div>
  </div>
</div>

这是样式:

.rows,
.columns {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.columns {
  flex-direction: row;
  max-height: 100%;
  overflow: hidden;
}

.main {
  flex: 1;
}

.scroll {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
}

.scroll > * {
  margin: 0;
  width: 100%;
  overflow: auto;
}


html,
body,
#main-container,
#main-view,
.scrollable {
  height: 100%;
  margin: 0
}

#main-view > div {
  max-height: 100%;
  display: flex;
}

.head {
  height: 120px
}

在版本 43 发布之前，此构造在 firefox 和 chrome 中运行良好。现在容器的高度是错误的，页眉和页脚不会展开以显示其内容，并且内容容器位于页眉内容之上。知道如何解决这个问题吗？

编辑

问题似乎出在这一行:

#main-view > div {
  max-height: 100%;
}

这个想法是只有当内容太大时盒子才应该展开。

改成

#main-view > div {
  height: 100%;
}

修复了内部容器的错误高度，但现在盒子的高度始终为 100%，即使内容非常小也是如此。

Answer 1

max-heigth 和 flexbox 有问题:flexbox misbehaving with max-height

所以解决方案是将flex属性设置为每个元素洞察rows容器为0

.rows .main {
  flex: 1;
}

.rows > * {
  flex: 0 0 auto
}