HTML5 flexible box with flexible height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Height

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

Description

HTML5 flexible box with flexible height

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">

html, body {
   height:100%;
   margin:0;
}
.main-container {<!--from w w  w . j  a va  2s  .  c om-->
   height:100%;
   display:flex;
   display: -webkit-flex;
   flex-direction: row;
   -webkit-flex-direction: row;
   -webkit-align-content: stretch;
   align-content: stretch;
}
.left {
   background-color:lightgreen;
   width:100px;
}
.right {
   background-color: red;
   -webkit-flex: 1;
   flex:1;
   position:relative;
}
.child {
   background-color:steelblue;
   position:absolute;
   width:100%;
   height:100%;
}
.scrollable {
   overflow-y:auto;
}


      </style> 
 </head> 
 <body> 
  <div class="main-container"> 
   <div class="left">
     LEFT 
   </div> 
   <div class="right"> 
    <div class="child scrollable">
      RIGHT 
     <br> 
     <br> 
     <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials