Adding scroll bars to <aside>, <main> and other flex layout elements [duplicate]

Question

I'm trying to confine content inside a flex-based layout, which uses the following simple code:

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

The CSS I have is:

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

The problem is that when adding long length content to the aside or main elements, the horizontal scrolls in those elements show ok, however the vertical scrolls are not show but the element gets as tall as its content, pushing everything under it (the footer) off screen. The client area then gets vertical scrolls.

I need these elements to still behave as they show with no content, but have scrollers if their content are larger than their screen size.

Instead of this (overflow gets scrolls):

I get this (overflow is visible, pushing all elements off):

Answer 1

Remove height: 100%; from section aside as it's not needed. section is set to flex-grow: 1;, which means that whole area will take up the available viewport height, and aside is a flex child of section so the aside's height will automatically fill the height of section.

PS that layout looks familiar ;)

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

Answer 2

Ok, I think it works now. Seems that section height:0px; is the cure.

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>