Fixed header, scrollable content and fixed footer layout using flexbox only

Question

I'm trying to make a HEADER, scrollable CONTENT and FOOTER structure using flex:

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 400px;
  background-color: white;
  border: 1px solid black;
  text-align: center;
  border-collapse: collapse;
  overflow-y: hidden;
}

.header {
  justify-self: flex-start;
  background-color: #cdcdcd;
  padding: 8px;
}

.content {
  border: 1px solid black;
  padding: 8px;
  overflow-y: scroll;
}

.footer {
  justify-self: flex-end;
  background-color: #cdcdcd;
  padding: 8px;
}

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
  </div>

  <div class="footer">
    Footer
  </div>
</div>

I can't avoid the whole screen to scroll, not only the content. I need header and footer to remain fixed in their positions (top and bottom respectively) and scroll only content (vertical scrollbar on content only).

@Mendes Wait, this already works as expected right? What's the problem now? [See this?](https://jsbin.com/vijidofoqi/edit?html,css,output) Or did I not understand your problem correctly? — Praveen Kumar Purushothaman, Nov 12 '20 at 17:37
No. The vertical scroll should be in the content, not in the whole page.... Only content must be scrollable - header is fixed on top and footer fixed on bottom... — Mendes, Nov 12 '20 at 17:39
Your code is working fine for me on Chrome, Edge and Firefox on Windows 10. i.e. the tall section is scrolling and the footer and header are staying put. (This is with me copying the code to my own filestore - the snippet doesn't work on the SO site - maybe something to do with iframe??) — A Haworth, Nov 12 '20 at 17:41
@Mendes You forgot to reset the margins! `body {margin: 0; padding: 0;}` Give the container `position: fixed; height: 100%; width: 100%`, that will work! Done! — Praveen Kumar Purushothaman, Nov 12 '20 at 17:42
Praaven, this full code goes inside other divs (not always 100vh), so I cannot make position: fixed as exepected... Seens that is something with the parent... — Mendes, Nov 12 '20 at 17:44
margin:0 to body + box-sizing:border and height:100vh to container fixes the issue ... — Temani Afif, Nov 12 '20 at 20:05

score 4 · Accepted Answer · answered Nov 12 '20 at 17:44

Adding flex: 1 1 auto; and height: 0px; will make the .content scrollable.

However, since there's a height: 100%; on the .container, .content will shrink, use a min-height to prevent this;

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 400px;
    background-color: white;
    border: 1px solid black;
    text-align: center;
    border-collapse: collapse;
    overflow-y: hidden;
}

.header {
    justify-self: flex-start;
    background-color: #cdcdcd;
    padding: 8px;
}

.content {
    flex: 1 1 auto;
    height: 0px;
    min-height: 300px;
    
    border: 1px solid black;
    padding: 8px;
    overflow-y: scroll;
}

.footer {
    justify-self: flex-end;
    background-color: #cdcdcd;
    padding: 8px;
}

<div class="container">
    <div class="header">Header</div>
    <div class="content">
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
        <p>Very tall content</p>
    </div>

    <div class="footer">
        Footer
    </div>
</div>

This is the correct answer... Thanks! Weird flexbox... some hidden tricks like this - a no heighted div that will grow to fill the available vertical space... Well done! — Mendes, Nov 12 '20 at 17:47
Is there a way, without knowing the height of the header or footer, of getting the content to fill all the remaining space and be scrollable (ie have a height?) I thought that was what flex was for but it doesn't seem to give an actual height. It doesn't seem very satisfactory to have a minimum height of 300px - which is what seems to get chosen - ie the full remaining height isn't filled. Have I misunderstood? — A Haworth, Nov 12 '20 at 17:49
@AHaworth, if the parent of a scrollable element has no fixed height; scrolling is kinda hard. If you use some sort of height on the body (eg; 100vh), thats fine, but since the OP did not had a fixed container size, this seems like a solid solution. In OP's real project, that could probablt removed if the parent (container) has a height already. — 0stone0, Nov 12 '20 at 17:51
Hi, thanks, yes it's what I've had to do too but I don't understand why flex doesn't give it a height in the sense that overflow-y can then use it. I think I'm missing something! — A Haworth, Nov 12 '20 at 18:04

score 0 · Answer 2 · answered Nov 12 '20 at 17:40

change the height of the container to height: calc(100vh - (body padding + contaienr border thickness);

In this case I changed height from 100% (100% of content) to height: calc(100vh - 12px);

/* for demonstartion purpose only */
body {
  margin: 0;
  padding: 5px;
}

/* for demonstartion purpose only */

.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 12px);
  width: 400px;
  background-color: white;
  border: 1px solid black;
  text-align: center;
  border-collapse: collapse;
  overflow-y: hidden;
}

.header {
  justify-self: flex-start;
  background-color: #cdcdcd;
  padding: 8px;
}

.content {
  border: 1px solid black;
  padding: 8px;
  overflow-y: scroll;
}

.footer {
  justify-self: flex-end;
  background-color: #cdcdcd;
  padding: 8px;
}

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
    <p>Very tall content</p>
  </div>

  <div class="footer">
    Footer
  </div>
</div>

You're fixing footer height to 12px. Footer has undefined height (depending on content). Also full container shall not be full screen (100vh), but its parent height (100%). — Mendes, Nov 12 '20 at 17:42
I'm not fixing the footer height. try it out on you own and adjust the footer height it will adept. 12px is the body padding in this demonstartion aswell as the container border thickness. alternative you have to define a fixed height. 100% height will always adjust to the contents height. — tacoshy, Nov 12 '20 at 17:43

Fixed header, scrollable content and fixed footer layout using flexbox only

2 Answers2