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
}

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

Flex box bug with max-height in chrome v43

html

css

google-chrome

flexbox