html - 如何使 flexbox 与垂直滚动条和具有最小高度的子 div 一起工作

Question

在下面的标记中，当 page div 没有足够的垂直空间并且有垂直滚动条时，app-sidebar div 不会拉伸(stretch)到填充垂直空间并受视口(viewport)高度限制。

html, body {
  height: 100%;
  margin: 0;
}

.viewport {
  height: 100%;
  width: 100%;
  display: flex;
}

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-header {
  height: 48px;
  background: #AAAAAA;
}

.app-body {
  flex: 1;
  display: flex;
}

.app-sidebar {
  width: 220px;
  background: #999999;
}

.app-content {
  flex: 1;
  display: flex;
}

.feature {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feature-header {
  height: 48px;
  background: #888888;
}

.feature-body {
  flex: 1;
  display: flex;
}

.page {
  flex: 1;
  min-width: 600px;
  max-width: 1200px;
  min-height: 400px;
  max-height: 800px;
  background: #777777;
}

<div class="viewport">
  <div class="app">
    <div class="app-header">
    </div>
    <div class="app-body">
      <div class="app-sidebar">
      </div>
      <div class="app-content">
        <div class="feature">
          <div class="feature-header">
          </div>
          <div class="feature-body">
            <div class="page">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

enter image description here

Answer 1

您需要在 .viewport 上使用 min-height，此处简化为使用视口(viewport)单位。

请注意，IE11 不喜欢 flex: 1(这使得 flex-basis 为 0/0px)，因此要么使用 flex- grow: 1 或 flex: 1 1 auto(我在下面的示例中没有更改)。

body {
  margin: 0;
}

.viewport {
  min-height: 100vh;               /*  changed  */
  display: flex;
}

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-header {
  height: 48px;
  background: #AAAAAA;
}

.app-body {
  flex: 1;
  display: flex;
}

.app-sidebar {
  width: 220px;
  background: #999999;
}

.app-content {
  flex: 1;
  display: flex;
}

.feature {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feature-header {
  height: 48px;
  background: #888888;
}

.feature-body {
  flex: 1;
  display: flex;
}

.page {
  flex: 1;
  min-width: 600px;
  max-width: 1200px;
  min-height: 400px;
  max-height: 800px;
  background: #777777;
}

<div class="viewport">
  <div class="app">
    <div class="app-header">
    </div>
    <div class="app-body">
      <div class="app-sidebar">
      </div>
      <div class="app-content">
        <div class="feature">
          <div class="feature-header">
          </div>
          <div class="feature-body">
            <div class="page">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>