html - flexbox vertical centering plus a sticky footer -

im using flexbox lot on page. im using on 6 images spaced apart works fine.

this wrapped in container (pink background). want aligned vertically , horizontally of window. got working fine. untill added in flexbox sticky footer. cant them both working @ once.

my main issue safari, getting sticky footer working in that. use flex: 1 0 auto; on .container class.

if change value flex: 1; centers thte footer not work in safari

can shed light on this. i've never used flexbox before

https://codepen.io/gorelegacy/full/dxzbmk/

can bit more precisely? me it's working fine in codepen. or pink background (which shows black on large screen) problem?

one advice, not solution: flexbox used define layout. see give body flex-direction: row, , give elements fixed height. instead of using

.bottom {   height: 40px; } 

i recommend using:

flex: 0 0 40px; 

the results same, prevent little bugs or weird behaviour in future. same goes div class=top.

regarding problem, try following:

body { display: flex; flex-direction: column; }  .top {     flex: 0 0 40px; }  .content {     flex: 1;     overflow-y: scroll; }  .bottom {     flex: 0 0 40px; } 

make sure .top, .bottom , .content , direct children in html. otherwise won't work.

this way top , bottom bar fixed, , content fills space inbetween.

edit: vertically align content within <div class="content">, should add css. (along code above)

.content {     flex: 1;     overflow-y: scroll; //only if want fixed footer     display: flex;     flex-direction: row; //column should fine, since have 1 child element     justify-content: center;     align-items: center; }  .content-inner { //the , direct child of content     margin: auto; }