Flexbox布局溢出窗口[重复]

Question

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

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

帮助实现布局。

除了布局将窗口底部推到标题高度之外，一切似乎都很好。如果我删除标题，则不会将任何内容推到视野之外。

是否可以保留标题行并使第二行留在窗口内？

jsFiddle to try and illustrate the issue.

Answer 1

默认情况下，弹性项目的最小高度/宽度等于内容，换句话说，弹性项目不能小于它的内容。

要覆盖该行为，请使用 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>