Make flexbox item occupy 100% of remaining width - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Make flexbox item occupy 100% of remaining width

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>flex 100% width</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
.container {<!--from w  w w .  jav a 2 s.  c om-->
   display:flex;
   flex-direction:row;
   align-items:center;
   flex-wrap:wrap;
   background-color:Chartreuse;
   justify-content:flex-end;
}

.container .title {
   padding:21px;
   background-color:yellow;
   margin-right:21px;
   flex-grow:2;
}

.container .fullwidth {
   background-color:blue;
   height:61px;
   margin:11px 0;
   width:81%;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <span class="title">title</span> 
   <div class="fullwidth"></div> 
   <div class="fullwidth"></div> 
   <div class="fullwidth"></div> 
  </div>  
 </body>
</html>

Related Tutorials