Fluid sticky footer with flex

Question

I am trying to make footer at the bootom with flex as described in this question How to make a fluid sticky footer

the answer with adding to the body

bo         


        

Answer 1

What if ?

the second container can be a flexbox too ,

Use the same CSS flex technic applied to body and #mainDiv to #mainDiv and #contentDiv, minus height since flex:1; is already sizing #mainDiv.

body,
#mainDiv  {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
}
#mainDiv,
#contentDiv {
  flex: 1;
}

/* see them */
#headerDiv,#footerDiv {background:yellow;padding:1em}
#mainDiv {background:pink;}

 This is header 

  
 This is content 
  
 This is footer