全高 flexbox，随内容增长

Question

我有一个基本的 two-column flexbox 布局（侧面菜单，header，主要内容）。

我希望侧边菜单的宽度固定，但高度增加到整个页面的 100%。对于我的主要内容，有一个固定高度 header 和一个动态高度内容窗格，我希望该窗格的背景也填充可用高度的 100%。

如果屏幕的高度足以包含所有内容，一切都很好
如果屏幕的高度不能包含所有内容（例如：需要滚动），则 1) 菜单的背景仅下降到原始视口的底部，以及 2) 主要内容的背景较低 [但仍不是全高]因为 header 将它向下推了一些。

当主要内容超出可用高度并且需要滚动时，背景不会一直向下延伸到页面

查看黑色、灰色和控制台之间的交集 window...左侧黑色 bg 是带有静态内容的菜单，右侧灰色 bg 是内容不断增加的主要内容，底部白色 bg 在第二两张图是wtf?

加载数据之前，根本没有向下滚动
加载数据之前，向下滚动到页面末尾
加载数据后，向下滚动到页面末尾

我不知道附加到 html、body 的高度 100% 是否真的在做任何事情，因为删除它们不会改变行为，仍然与下面的屏幕截图相同。

见fiddlehere

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.flex-row.flex-fill {
  height: 100%;
}

.flex-col {
  display: flex;
  flex-direction: column;
  flex-flow: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.flex-col.flex-fill {
  width: 100%;
}

.flex-right {
  margin-left: auto;
}

.menu {
  width: 200px;
  background-color: blue;
  color: $white;
  padding: 15px;
  height: 100%;
  flex-grow: 1;
}

.header {
  background-color: red;
  padding: 15px;
  font-family: italic;
  font-size: 1.5em;
}

.main-content {
  background-color: green;
  height: 100%;
  flex-grow: 1;
  padding-bottom: 30px;
}

<div class="flex-row flex-fill">
  <div class="flex-col">
    <div class="menu">
      <ul>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
      </ul>
    </div>
  </div>

  <div class="flex-col flex-fill">
    <div class="header">header</div>
    <div class="main-content">main content</div>
  </div>
</div>

Answer 1

有两个问题导致了这个问题：

首先，弹性容器上的 height: 100% 不工作，因为有。 html, body { height: 100%; }.

解决了这个问题

其次，flex 容器上的相同 height: 100% 将背景的高度限制为固定的 100%。通过切换到最小高度，背景可以随内容扩展。

* { box-sizing: border-box; }

html { height: 100%; }

body {  
    min-height: 100%;
    display: flex;
    margin: 0;
    padding: 0; 
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
}

revised fiddle

全高 flexbox，随内容增长

Full height flexbox, to grow with content

html

css

flexbox