Show Scrollbars in two flexbox containers - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

Show Scrollbars in two flexbox containers

Demo Code

ResultView the demo in separate window 

<!--<!--from w  w w .java 2 s  .  c o m-->
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
 <head> 
  <style>

html, body {
   height: 100%;
}
.container {
   background-color: lightyellow;
   display: -webkit-flex;
   -webkit-flex-direction: column;
   -webkit-flex-flow: column;
   height: 100%;
}
.main  {
   background-color: lightgrey;
   -webkit-flex: 1;
   display: -webkit-flex;
   -webkit-flex-direction: row;
   -webkit-flex-flow: row;
   min-height: 0;
}
.vertical {
   overflow-y: scroll;
}
.pane  {
   width: 50%;
}
.search {
   width: 100%;
   background-color: pink;
   -webkit-flex: 0.01;
}
.footer {
   width: 100%;
   background-color: yellow;
   -webkit-flex: 0.01;
}
.search-results {
   background-color: lightblue;
}
.content {
   background-color: lightgreen;
}

      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="search">
     Search bar 
   </div> 
   <div class="main"> 
    <div class="search-results vertical pane"> 
     <strong>Search results</strong> 
     <ul> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
      <li>Item</li> 
     </ul> 
    </div> 
    <div class="content vertical pane"> 
     <strong>Item</strong> 
     <ul> 
      <li>Item detail</li> 
      <li>Item detail</li> 
      <li>Item detail</li> 
      <li>Item detail</li> 
      <li>Item detail</li> 
      <li>Item detail</li> 
      <li>Item detail</li> 
      <li>Item detail</li> 
      <li>Item detail</li> 
      <li>Item detail</li> 
      <li>Item detail</li> 
     </ul> 
    </div> 
   </div> 
   <div class="footer"> 
    <strong>Footer</strong> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials