Flexbox 子项可以有溢出滚动条吗？

我想使用CSS3 弹性盒模型创建跨设备布局并发现HugoGiraudel 的一个很好的布局示例我用它作为起点。

布局基本上是这样的：

HTML 的结构如下：

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    ...
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

CSS 最重要的部分如下：

.wrapper {
  display: flex;
  flex-flow: row wrap;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}
.aside { flex: 1 auto; }
.main    { flex: 3 0px; }

我的问题是，当文章包含的内容超出屏幕显示范围时，外部旁边会出现一个垂直滚动条.wrapper页脚不再可见。

我尝试添加overflow: scroll and flex-flow: column wrap到文章的风格，但没有成功 - 滚动条可见，但文章总是会增长以完全包含其内容。

如果内容增长，如何保持页脚可见和文章滚动？

您的文章内容扩展整个布局的原因是它没有任何高度限制。就像是max-height会限制其增长，然后会出现垂直滚动条。

这是您的代码，经过一些调整：

HTML（为文章和旁白添加了一个嵌套的弹性容器）

<div class="wrapper">
  <header class="header">Header</header>
  <section class="inner-wrapper">
    <article class="main">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
         fames ac turpis egestas...</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
         fames ac turpis egestas...</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 
         fames ac turpis egestas...</p>
                            .
                            .
                            .
    </article>
    <aside class="aside aside-1">Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
  </section>
  <footer class="footer">Footer</footer>
</div>

CSS（仅限关键调整）

html, body {
  height: 100%;
}

.wrapper {
  display: flex;  
  height: 100%;
  flex-direction: column;        /* switch main container from row direction */
}

.inner-wrapper {
  display: flex;                 /* nested flex container; row direction */
  flex: 0 0 50%;                 /* limit height of container; adjust as necessary */
  min-height: 0;                 /* addresses a scrolling bug in Firefox;
                                    http://stackoverflow.com/a/34982902/3597276 */
}

.header {
    flex: 1;                     /* header to occupy all available height */
}

.footer {
  flex: 1;                       /* footer to occupy all available height */
}

.main {
  overflow-y: scroll;            /* enable vertical scrollbar */
}

修订版代码笔

NOTES:

• 现在主要的弹性容器（.wrapper) 具有三个垂直堆叠的弹性项目。
• 每个项目的高度可以单独设置。在上面的代码中，页眉和页脚被告知消耗所有可用空间（flex: 1）。中间的弹性项目（.inner-wrapper) 限制为 50%，从而启用滚动。尝试 25% 和 75% 作为替代示例。
• 中间的项目兼作弹性容器，并将文章和旁白水平排列。每个项目的宽度可以单独设置。上一点也适用于此。