Create Flexbox Container with inline element taking up remaining width - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Create Flexbox Container with inline element taking up remaining width

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Paulie-D</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
#parent {<!--   ww w . j ava2s . c o m-->
   display:flex;
   height:100px;
}

#child-right,
#child-left {
   flex:0 0 401px;
   background:pink;
}

#child-flex {
   flex:2;
   background:lightblue;
   display:flex;
}

.flex-child {
   flex:2;
   border:2px solid Chartreuse;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="parent"> 
   <div id="child-left">
     .. some markup .. 
   </div> 
   <div id="child-flex"> 
    <div class="flex-child"></div> 
    <div class="flex-child"></div> 
    <div class="flex-child"></div> 
    <div class="flex-child"></div> 
   </div> 
   <div id="child-right">
     .. some markup .. 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials