Use scrollbars on a flex item - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Item

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

Description

Use scrollbars on a flex item

Demo Code

ResultView the demo in separate window 

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

.p {<!--from   ww w. j  a v  a 2 s . c o m-->
   display: flex;
   background: blue;
   padding: 10px;
   overflow: auto;
   width: 400px;
   height: 300px;
}
.aside {
   background: green;
   flex: 0 0 100px;
   margin-right: 10px;
}
.content {
   padding: 10px;
   background: purple;
   overflow: auto;
}
.large {
   background: orange;
   width: 1000px;
   height: 800px;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="p"> 
   <div class="aside">
     aside (fix width) 
   </div> 
   <div class="content"> 
    <div class="large">
      large content large content large content large content large content large content large content large content 
      large content large content large content large content large content large content 
      large content large content large content large content large content large content 
      large content large content large content large content large content large content large content 
      large content large content large content large content large content large content 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials