Flex Footer won't stay down in Chrome

Question

I use flexbox so that my footer stays at the bottom only when the content is shorter than the viewport. If it is higher, the footer should remain below the content, so you need to scroll it to see it.

This works correctly in Firefox and Edge, but not in Chrome or IE.

In Chrome, as you will see, creating a viewport shorter than the content leaves the footer “stuck” at the bottom of the view port. If you then scroll through the list, you will see that the footer scrolls up the page.

I believe the problem is contentContainer:

#contentContainer { display: flex; flex-direction: column; overflow: auto; height: 100%; width: 100%; } 

This div contains the content and footer so that it can have a scroll bar instead of the content itself. I'm not quite sure what is wrong with him.

 html, body, #app { padding: 0; margin: 0; } #app, #appContainer { display: flex; flex-direction: column; height: 100vh; } #header { background-color: #dddddd; width: 100%; min-height: 36px; height: 36px; display: flex; flex-direction: row; } #contentContainer { display: flex; flex-direction: column; overflow: auto; height: 100%; width: 100%; } #content { display: flex; flex-direction: column; flex: 1; } #footer { display: flex; flex-direction: row; background-color: #dddddd; height: 20px; min-height: 20px; width: 100%; } 

 <div id="app"> <div id="appContainer"> <div id="header">Header</div> <div id="contentContainer"> <div id="content"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> <div id="footer">Footer</div> </div> </div> </div> 

JSFiddle demo.

Answer 1

Try it so hopefully this is what you are looking for

https://jsfiddle.net/wzz703da/

 html, body, #app { padding: 0; margin: 0; } #app, #appContainer { display: flex; flex-direction: column; min-height: 100vh; } #header { background-color: #dddddd; width: 100%; min-height: 36px; height: 36px; display: flex; flex-direction: row; } #contentContainer { display: flex; flex-direction: column; flex: 1; overflow: auto; height: 100%; width: 100%; } #content { display: flex; flex-direction: column; flex: 1; } #footer { display: flex; flex-direction: row; background-color: #dddddd; height: 20px; min-height: 20px; width: 100%; } 

Answer 2

I tried changing the contentContainer properties from width to min-width, and content flex-shrink to 0:

 html, body, #app { padding: 0; margin: 0; } #app, #appContainer { display: flex; flex-direction: column; height: 100vh; } #header { background-color: #dddddd; width: 100%; min-height: 36px; height: 36px; display: flex; flex-direction: row; } #contentContainer { display: flex; flex-direction: column; overflow: auto; width: 100%; min-height: calc(100vh - 36px); } #content { display: flex; flex-direction: column; flex-basis: auto; flex-grow: 1; flex-shrink: 0; } #footer { display: flex; flex-direction: row; background-color: #dddddd; height: 20px; min-height: 20px; width: 100%; } 

 <div id="app"> <div id="appContainer"> <div id="header">Header</div> <div id="contentContainer"> <div id="content"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> <div id="footer">Footer</div> </div> </div> </div>