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
}

Flex v43中最大高度的Flex盒子错误

1 个答案: