Create 100% width with div displayed as table-cell using flex display - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Cell

Description

Create 100% width with div displayed as table-cell using flex display

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">
.row {<!--from   www . j a v a  2s .c  o  m-->
   display:flex;
   margin-bottom:.6em;
}

.row div {
   padding-left:6px;
   padding-right:6px;
}

.row div:first-child {
   flex-basis:56px;
}

.row div:nth-child(2) {
   flex:2;
}

.row div:last-child {
   flex-basis:36px;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="row"> 
    <div style="background-color: red"></div> 
    <div>
      This text is not too long 
    </div> 
    <div style="background-color: blue"></div> 
   </div> 
   <div class="row"> 
    <div style="background-color: red"></div> 
    <div>
      This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. 
    </div> 
    <div style="background-color: blue"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials