将滚动条添加到<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是section的灵活子项，因此aside ＆＃39;的高度将自动填充section的高度。

PS布局看起来很熟悉;）

＆＃13;

＆＃13;

* {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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

好的，我认为它现在有效。似乎height:0px;部分是治愈方法。

CSS

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

header, footer {
  height: 50px;
  min-height: 50px;
  background: black;
  color: #fff;
  transition-property: height;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}

section {
  flex-grow: 1;
  display: flex;
  height:0px; /* <== for scrolls in aside */
}

aside  {
  width: 100px;
  background: #ccc; 
  overflow:auto;
  min-height: 0;
  transition-property: width;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}

section main {
  overflow:auto;
  flex-grow: 1;

}
footer:hover
{
    height:200px;
}
aside:hover
{
    width:200px;
}

HTML

<header>header</header>
<section>
  <aside><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></aside>
  <main>main long content...</main>
  <aside><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><p>main long content...</p></aside>
</section>
<footer>footer</footer>