Make a flexbox middle part scroll, without the container taking 100% of the page

Question

Making a flexbox child have a scroll bar instead of growing, takes a container with fixed height. easy to create in a an isolated environment:

 #container {
  height: 100%;
  display: flex;
  flex: 0 0 auto;
  flex-flow: column;
}

#list {
  display: flex;
  flex-flow: column;
  overflow: auto;
}

https://jsfiddle.net/1yjk5ojp/

but let's say i want to use a page header. i don't know it's exact size, so i can't use aboslute position with mergin. i also can't use any flex component along the way, cuz it's must be fixed size.

for example - added a 100px header

<div style="height: 100px;">
  <h1>Page header</h1>
</div>

https://jsfiddle.net/z6dsq822/1/

is there anything i can do to make a fixed height component after an unknown size component?

my constrains are that i don't want another scroll bar, and i want the header to be outside this structure (it's a large application with different views, the header is in a template)

"i also can't use any flex component along the way, cuz it's must be fixed size." what do you mean? You can have the header be part of a flex layout and a fixed size. — Michael Coker, Apr 02 '17 at 20:51

Michael Coker · Accepted Answer · 2017-04-02T21:31:46.913

Make the parent container for everything a flex column and set #container to flex-grow: 1 so it takes up the available space, then everything else works as you already had it.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  flex: 0 0 100px;
}

#container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
}

#list {
  display: flex;
  overflow: scroll;
  flex-direction: column;
  flex-grow: 1;
}

#top {
  flex: 0 0 20px;
  background-color: #db9277;
}

#bottom {
  flex: 0 0 20px;
  background-color: #db9277;
}

.row {
  height: 100px;
  background-color: #85d8d5;
}

<header>
  header
</header>
<div id="container">
  <div id="top"></div>
  <div id="list">
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
    <div class="row">Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="bottom"></div>
</div>

@TheAnosmic I must not understand your end goal. what do you mean "another scroll bar"? there is just one scroll bar for the content. I thought you wanted everything constrained to the window height? If the elements are contained to the window height, you're either going to have to have a scroll bar, or you could hide the content with overflow:hidden or something. If you don't want a scrollbar at all, just remove `height: 100%` from your example. — Michael Coker, Apr 02 '17 at 21:13
using firefox: you get the header, which is 100px, then you get the container, which is 100% of the body, so the page is 100% + 100px, and you get another scroll bar for the whole page. using chrome: you actually get the height correct, but there is still a scroll bar for the whole page (can be removed). chrome is the intended behaviour, but i'm not sure which one is "correct". [link](http://i66.tinypic.com/vymqzl.png) — TheAnosmic, Apr 02 '17 at 21:17
@TheAnosmic oh sorry, I goofed on the answer. Can you check again? — Michael Coker, Apr 02 '17 at 21:32
seems to work. Problem was not letting the container grow to it's parent 100% size, with flex 1. thanks! — TheAnosmic, Apr 02 '17 at 22:07
Also - justify-content: flex-end; does break scrolling, i guess this thing caused me this whole mess. — TheAnosmic, Apr 02 '17 at 22:34

Make a flexbox middle part scroll, without the container taking 100% of the page

1 Answers1