为 <aside>、<main> 和其他 flex 布局元素添加滚动条

Question

我试图将内容限制在基于 flex 的布局中，该布局使用以下简单代码：

<header>header</header>
<section>
  <aside>aside long content...</aside>
  <main>main long content...</main>
  <aside>aside long content...</aside>
</section>
<footer>footer</footer>

我拥有的 CSS 是：

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header, footer {
  height: 50px;
  min-height: 50px;
  background: black;
  color: #fff;
}

section {
  flex-grow: 1;
  display: flex;
}

section aside  {
  width: 100px;
  background: #ccc; 
  height:100%;
  overflow:scroll;
}

section main {
  overflow:scroll;
  flex-grow: 1;
}

问题是，当向旁边或主要元素添加长内容时，这些元素中的水平滚动显示正常，但是垂直滚动没有显示，但元素变得与其内容一样高，将所有内容推到它下面（页脚）离屏。然后客户区获得垂直滚动。

我需要这些元素在没有内容的情况下仍然表现得像它们显示的那样，但如果它们的内容大于它们的屏幕尺寸，则有滚动条。

而不是这个（溢出得到滚动）：

我明白了（溢出是可见的，将所有元素都关闭）：

Answer 1

删除height: 100%;，section aside因为不需要。section设置为flex-grow: 1;，这意味着整个区域将占据可用的视口高度，并且aside是 的 Flex 子级，section因此 的aside高度将自动填充 的高度section。

PS，布局看起来很熟悉；）

* {margin:0;padding:0;}
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header, footer {
  height: 50px;
  min-height: 50px;
  background: black;
  color: #fff;
}

section {
  flex-grow: 1;
  display: flex;
}

section aside  {
  width: 100px;
  overflow:scroll;
}

section main {
  overflow:scroll;
  flex-grow: 1;
}

aside .inner {
  background: #ccc;
}

<header>header</header>
<section>
  <aside><div class="inner"><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p></div></aside>
  <main>main long content...</main>
  <aside><div class="inner">main long content...</div></aside>
</section>
<footer>footer</footer>