Flexbox 布局溢出窗口 [重复]。

Question

这个问题在这里已经有了答案:

为什么弹性项目不能收缩到内容大小？ (1个回答)

封闭 上月.

创建了一个简单的flexbox布局，有2行，1行头部，1行主要内容，第二行包含2个cols，其中1个cols我想100%拉伸到窗口的高度（所以它可以有可滚动的项目），第2个cols坐在右边的内容（同样可滚动）。我设置了 html, body 以。

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

以帮助实现布局。

除了布局将窗口底部推到头的高度外，一切似乎都很好。如果我删除页眉，没有内容被推到窗外。

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

jsFiddle试图说明这个问题。

Answer 1

Flex项目默认有一个与内容相同的最小高度宽度，换句话说，一个Flex项目不能比它的内容小。

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