Flexbox and 100vh height: footer disappears when there is too much content

Question

I have a simple layout: header + sidebar + content + footer.

The root element has a flex display with row direction; root = sidebar + wrapper. The wrapper = header + content + footer. The wrapper is displayed as flex and has flex direction of column.

When the content is a single word, the footer is visible just fine, however once I replace the content with a lot of text, the footer disappears (pics below).

JsFiddle with little content: https://jsfiddle.net/3mfdu8ey/1/

JsFiddle with a lot of content: https://jsfiddle.net/3mfdu8ey/2/

And once I scroll the second fiddle to the end:

The footer is gone. I tried fixing it with

  height: calc(100vh - 200);

on #content-wrapper, but it didn't work.

My code:

html:

 <div id = "app">
    <div id = "custom-sidebar">
      Sidebar
    </div>

    <div id = "content-wrapper">
      <div id = "header">
        Header
      </div>

      <div id = "content">
        Content
      </div>

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

css:

#content-wrapper  {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: calc(100vh - 200);  
 }

#content  {
  padding: 30px;
}

#app  {
  background-color: gray;
  display: flex;
  height: 100vh;
  font-family: 'Source Sans Pro', sans-serif;
  padding: 0;
}

 #header  {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
         align-items: flex-end;
        padding-bottom: 20px;
}

#sidebar  {
    width: 12%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

 #footer  {
        height: 200px;
        width: 100%;
    }

/*
  Colors
*/

#custom-sidebar  {
 background-color: orange;
}

#footer  {
  background-color: green;
}

#header  {
  background-color: red;
}

#content  {
  background-color: silver;
}

You need to add `min-height: 0` or `overflow: auto` to the overflowing flex item. https://jsfiddle.net/h5w62kmb/ — Michael Benjamin, May 21 '20 at 20:01
@MichaelBenjamin Footer in your fiddle is barely visible too — parsecer, May 21 '20 at 23:44
Probably because `flex-shrink` isn't disabled. Add `flex-shrink: 0` to the footer element. — Michael Benjamin, May 21 '20 at 23:52

Francois Carstens · Accepted Answer · 2020-05-22T01:08:41.060

1

You need to set overflow on your content to prevent it from pushing footer down. See my example.

Edit: You need to set min-height instead of height. See this fiddle: https://jsfiddle.net/z9qt1cwr/

I include the minimal amount of styles you'll need to achieve this.

body,
html {
  margin: 0;
  box-sizing: border-box;
}

#app {
  display: flex;
  min-height: 100vh;
}


#content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;

}

#custom-sidebar {
  width: 12%;
}

#content {}

#header {}

#footer {
  height: 200px;
}

#custom-sidebar, #header, #content, #footer {
  padding: 1rem 2rem;
}

/*
  Colors
*/


#app {
  background-color: gray;
}

#custom-sidebar {
  background-color: orange;
}

#footer {
  background-color: green;
}

#header {
  background-color: red;
}

#content {
  background-color: silver;
}

edited May 22 '20 at 01:08

answered May 21 '20 at 19:29

Francois Carstens

477
3
13

You've added `overflow-y: scroll; flex-grow: 1;` to `#content`? Something else? – parsecer May 21 '20 at 19:37
It now displays a scroller inside `#content` `div` which is not something I want. I want it to be like any other page, including the current stackovereflow page - without a second scroller inside a `div`. – parsecer May 21 '20 at 19:38
I'm sorry, I missed what you were trying to do. I'll update my answer. – Francois Carstens May 21 '20 at 19:57
I've updated it with a fiddle. This should do what you're looking for. Basically change height for min-height. – Francois Carstens May 21 '20 at 20:06
1

It looks like the solution was simply replacing `height: 100vh` in `#app` element with `min-height: 100vh`;? At least that single edit seems to have worked for me. Nice, thank you! – parsecer May 22 '20 at 18:18
Pretty much. Glad it's working. – Francois Carstens May 22 '20 at 20:13

Flexbox and 100vh height: footer disappears when there is too much content

1 Answers1