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):
[![enter image description here](https://i.stack.imgur.com/mVCeU.jpg)](https://i.stack.imgur.com/mVCeU.jpg)

I get this (overflow is visible, pushing all elements off):
[![enter image description here](https://i.stack.imgur.com/8HP5A.jpg)](https://i.stack.imgur.com/8HP5A.jpg)