Adding scroll bars to
,
and other flex layout elements

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

Michael Coker · Answer 1 · 2017-01-13T02:20:09.070

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>

It shows the scrolls, but the containers are still full height and the scrollers obviously grayed out. — Aram Alvarez, Jan 13 '17 at 01:54
@AramAlvarez ah, sorry, missed that part where you wanted it to only be as tall as the content inside if there isn't much content. In that case, I would just introduce another element in the `aside`. Updated my answer. — Michael Coker, Jan 13 '17 at 02:21

score 3 · Answer 2 · edited Nov 23 '17 at 15:08

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>

`height: 0` worked for me too, but I don't understand why. can you provide some explanation on how it works? — Pau Fracés, Sep 03 '20 at 08:47

Adding scroll bars to , and other flex layout elements

2 Answers2

Adding scroll bars to
,
and other flex layout elements