Using flexbox with 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

Using flexbox with overflow:auto

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.main {<!--from w ww  .j  av a2 s  .  c om-->
   display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   background-color: gray;
   flex-direction: column;
}
.top, .bottom
{
   color: white;
   background: blue;
}
.content {
   overflow-y: scroll;
   max-height: 150px;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="main" style="margin-left: 200px"> 
   <div class="top">
     Top 
   </div> 
   <div class="content">
     this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> 
   </div> 
   <div class="bottom">
     Bottom 
   </div> 
  </div> 
  <div class="main" style="margin-left: -200px;"> 
   <div class="top">
     Top 
   </div> 
   <div class="content">
     <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> this is a test this is a test this is a test this is a test 
    <br> 
   </div> 
   <div class="bottom">
     Bottom 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials