Understanding flexbox and overflow:auto - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

Understanding flexbox and overflow:auto

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flex and nested overflow 2</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

.outer {<!--  ww  w  .  j  av  a  2  s .  c o  m-->
   background: black;
   position: absolute;
   height: 100%;
   width: 100%;
   display: flex;
}
.blue {
   width: 50px;
   background: blue;
}
.violet {
   flex: 1;
   background: violet;
   display: flex;
   flex-direction: column;
   min-height: 0; 
   min-width: 0; 
}
.brown {
   width: 50px;
   background: brown;
}
.red {
   height: 50px;
   flex-shrink: 0;
   background: red;
}
.orange {
   flex: 1;
   background: orange;
   overflow: auto;
}
.yellow {
   height: 50px;
   flex-shrink: 0;
   background: yellow;
}
.steelblue {
   flex: 1;
   background: steelblue;
   overflow: auto;
}
.green {
   height: 1000px;
   width: 2000px;
   background: green;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="outer"> 
   <div class="blue"></div> 
   <div class="violet"> 
    <div class="red"></div> 
    <div class="orange"> 
     <div class="green"></div> 
    </div> 
    <div class="yellow"></div> 
   </div> 
   <div class="brown"></div> 
  </div>  
 </body>
</html>

Related Tutorials