chrome v43 中具有最大高度的 Flex 框错误

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
}

此构造在 Firefox 和 chrome 中运行良好，直到版本 43 发布。现在容器的高度是错误的，页眉和页脚没有展开以显示其内容，并且内容容器覆盖了页眉内容。知道如何解决这个问题吗？

编辑

问题似乎出在这一行：

#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
}