Flexbox 布局溢出 window

Question

创建了一个简单的 flexbox 布局，有 2 行，1 header 行，1 个主要内容，第二行包含 2 列，其中 1 列我想拉伸 100% 到 window 的高度（因此它可以有可滚动的项目）并且第二列位于内容的右侧（再次可滚动）。我已将 html, body 设置为：

height: 100%; margin: 0; overflow: hidden;

帮助实现布局。

除了布局将 window 的底部推到 header 的高度之外，一切似乎都很好。如果我删除 header 没有内容被推出视图。

是否可以保留 header 行并使第二行留在 window 内？

jsFiddle to try and illustrate the issue.

Answer 1

默认情况下，弹性项目的最小值 height/width 等于内容，换句话说，弹性项目不能小于其内容。

要覆盖该行为，请使用 min-height:0; 至 .sectionRow2

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

.page {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

.sectionRow1 {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  background-color: yellow;
  border-bottom: 1px solid silver;
}

.sectionRow2 {
  min-height: 0;
  /* New */
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  background-color: blue;
  height: 100%;
}

.sectionRow2Col1 {
  display: flex;
  flex-direction: column;
  background-color: silver;
  border-right: 1px solid silver;
  width: 250px;
  height: 100%;
}

.sectionRow2Col2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  background-color: lightgrey;
}

.menuitems {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 100%;
}

.menufoot {
  display: flex;
  background-color: lavender;
  height: 40px;
}

.link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 4px 4px 4px;
  font-size: .9rem;
  background-color: white;
  border-bottom: 1px solid silver;
}

.content {
  display: flex;
  flex-grow: 1;
  align-items: stretch;
  overflow-y: auto;
}

.headerlogo {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 48px;
  width: 250px;
}

<div class="page">

  <header class="sectionRow1">
    <div class="headerlogo">
      <a href="#">Header</a>
    </div>
  </header>

  <section class="sectionRow2">
    <nav class="sectionRow2Col1">
      <div class="menuitems">
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
      </div>
      <div class="menufoot">Footer</div>
    </nav>

    <section class="sectionRow2Col2">
      <div class="content">
        Content..
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /> Content..
      </div>
    </section>

  </section>

</div>

Flexbox 布局溢出 window

Flexbox layout overflowing window

html

css

flexbox

height

overflow