全高度flexbox,随内容增长

Question

我有一个基本的两列flexbox布局(侧面菜单,标题,主要内容).

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

• 如果屏幕的高度足够高,可以包含所有内容,那么一切都很有效
• 如果屏幕的高度不能包含所有内容(例如:需要滚动),则1)菜单的背景仅下降到原始视口的底部; 2)主要内容的背景较低[但仍然不是全高]因为标题推动它一些.

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

查看黑色,灰色和控制台窗口之间的交叉点...左侧黑色bg是具有静态内容的菜单,右侧灰色bg是具有增长内容的主要内容,第二个两个图像中的底部白色bg是wtf？

1. 在加载数据之前,根本不向下滚动
2. 在加载数据之前,向下滚动到页面末尾
3. 加载数据后,向下滚动到页面末尾

我不知道高度100%附加到html,身体实际上是在做什么,因为删除它们不会改变行为,仍然与下面的截图相同.

请看这里的小提琴

.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%flex容器上的工作不起作用,因为父元素上没有指定高度.该问题已得到解决html, body { height: 100%; }.

其次,在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%;
}

修改过的小提琴