Question

我编写了以下Flexbox布局：

html, body {
  max-height: 300px;
  overflow: hidden;
}

.container1 {
  display: flex;
  max-height: 100%;
  flex-flow: column;
}

.container2 {
  display: flex;
  flex-flow: column;
  max-height: 100%;
  box-sizing: border-box;
  border: 3px solid black;
}

header {
  background-color: blue;
}

main {
  background-color: red;
  max-heigth: 100%;
  overflow: auto;
}

footer {
  background-color: green;
}

<div class="container1">
  <div class="container2">
    <header>header</header>
    <main>
      content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
      <br>content
    </main>
    <footer>footer</footer>
  <div>
</div>

Chrome正确呈现此页面：页眉和页脚是粘性的，内容占用尽可能多的空间，但仍然不会超过容器的高度。

对于其他浏览器（Firefox，Edge，Android浏览器等），标题仍然存在，但页脚没有，容器占用太多空间。

为什么会这样？ Chrome是否正确渲染，其他浏览器有错误？或者我做错了什么，Chrome是唯一能够原谅我的浏览器？

现在我知道只使用一个Flexbox容器就能“解决”这个问题。但是，问题出现在一个真实的Web项目中，我需要将其隔离以生成示例代码。在实际项目中，我需要使用两个容器，因此应该可以通过将两个容器保持在适当的位置来解决这个问题。

Answer 1

你的问题是，正如一些评论（GCyrillus）所述，你试图继承（最大）高度值。

我猜你想做什么，是将max-height设置为视口高度的100％？在这种情况下，您可以将100％的所有实例更改为

# ls /var/mail/
root  www-data  other-user

这将它设置为 V iewport H 8的过程。

此外，你的html和正文的高度设置为500px，然后max-height设置为300px，这看起来很奇怪。

如果您试图保持300px的最大高度，为什么不设置container1，container2和main的最大高度为300px？

Answer 2

问题是继承max-height值的尝试不正确，并且通过使用flex和height属性由 GCyrillus 解决。

请参阅：

jsfiddle.net/atb5yyez/6
jsfiddle.net/atb5yyez/7

Firefox使用Flexbox忽略最大高度

2 个答案: