Adding scroll to flex div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Adding scroll to flex div

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, .my-app {
   padding:0;
   margin:0;
   width:100%;
   height:100%;
   background:red;
}

.my-app {<!-- w  ww  .  j a  va  2 s . c  o  m-->
   display:flex;
   flex-direction:row;
}

.sidebar {
   background:orange;
   flex:0 0 301px;
   overflow:auto;
}

.sidebar>p {
   height:1001px;
}

.map-container {
   flex:2;
   display:flex;
   flex-direction:column;
   min-width:0;
}

.map {
   background:aqua;
   flex:2;
}

.toolbar {
   height:301px;
   background:lightgreen;
   overflow:auto;
}
</style> 
 </head> 
 <body> 
  <div class="my-app"> 
   <div class="sidebar"> 
    <p> Sidebar fixed width of 300px; </p> 
   </div> 
   <div class="map-container"> 
    <div class="map"> 
     <p> Map should grow to fill available space horizontally and vertically </p> 
    </div> 
    <div class="toolbar"> 
     <table class="large-table"> 
      <tbody> 
       <tr> 
        <td>Content should scroll and be 300px</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
        <td>Content</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials