Create Flexbox item with overflowing content - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Create Flexbox item with overflowing content

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>flex item height constraint test</title> 
  <style>
body {<!--from  www. ja  v a  2s  . c o m-->
   margin:0;
}

.container {
   width:100%;
   height:100vh;
   display:flex;
   flex-direction:column;
}

.top-bar {
   background-color:Chartreuse;
   height:51px;
   flex-shrink:0;
}

.inner-container {
   flex:2;
   background-color:yellow;
   width:100%;
   height:100%;
   display:flex;
   flex-direction:column;
   min-height:0;
}

.top {
   background-color:blue;
   flex:2;
   overflow:auto;
   font-size:41px;
   line-height:6rem;
}

.bottom {
   background-color:pink;
   height:201px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <div class="top-bar">
     Top bar 
   </div> 
   <div class="inner-container"> 
    <div class="top">
      O 
     <br> v 
     <br> e 
     <br> r 
     <br> f 
     <br> l 
     <br> o 
     <br> w 
     <br> i 
     <br> n 
     <br> g 
     <br> C 
     <br> o 
     <br> n 
     <br> t 
     <br> e 
     <br> n 
     <br> t 
    </div> 
    <div class="bottom">
      Bottom part 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials