Using flexbox to fill the available width for two items - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Width

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

Description

Using flexbox to fill the available width for two items

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">

* {<!--  w ww  . ja v a2s .c o m-->
   box-shadow: 0 0 0 1px black inset;
}
.container {
   display: flex;
   flex-wrap: wrap;
}
.cell1 {
   flex-basis: 100%;
}
.cell2 {
   flex-grow: 1;
}
@media (min-width: 800px) {
   .cell1 {
      max-width: 400px;
   }
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="cell1">
     contents of cell 1 
   </div> 
   <div class="cell2">
     contents of cell 2 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials