Child div overflowing with 100% height in Flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Height

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Height

Description

Child div overflowing with 100% height in Flexbox

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#wrapper {<!--from www . j a v a 2 s  .co m-->
   display:flex;
   flex-direction:column;
   height:100%;
}

#header {
   height:61px;
   position:relative;
   background-color:Chartreuse;
}

#footer {
   height:61px;
   background-color:yellow;
}

#page {
   flex-grow:2;
   overflow:auto;
   box-sizing:border-box;
   border:3px solid blue;
   height:100%;
   display:flex;
   flex-direction:column;
}

#inner {
   height:100%;
   border:3px dashed pink;
}

body, html {
   height:100%;
   margin:0px;
}
</style> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div id="header"></div> 
   <div id="page"> 
    <div id="inner"></div> 
   </div> 
   <div id="footer"></div> 
  </div>  
 </body>
</html>

Related Tutorials