Make flex child equal height of parent inside of grid column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Make flex child equal height of parent inside of grid column

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flexbox: pricing table</title> 
  <style>

.row {<!-- w w  w  .j a va2 s .c  om-->
   display: flex;
   flex-flow: row wrap;
   background: #00e1ff;
   margin: -8px;
}
.col {
   display: flex;
   flex: 1 0 400px;
   flex-flow: column;
   margin: 10px;
   background: grey;
}
.card {
   display: flex;
   height: 100%;
   padding: 20px;
   background: #002732;
   color: white;
   opacity: 0.5;
   align-items: stretch;
   flex-direction: column;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="row"> 
   <div class="col"> 
    <div class="card"> 
     <h3>Prices</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis ut corporis totam eos quasi deserunt vitae, unde explicabo, delectus incidunt sit reprehenderit nesciunt quia. Deleniti, labore placeat ex accusamus praesentium. 
    </div> 
   </div> 
   <div class="col"> 
    <div class="card"> 
     <h3>Prices</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nulla cumque. 
     <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla et, illum rerum officia perferendis assumenda animi error, fuga ut sunt, perspiciatis id, repudiandae ea nam unde eius possimus dolorem consequatur. 
     <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla et, illum rerum officia perferendis assumenda animi error, fuga ut sunt, perspiciatis id, repudiandae ea nam unde eius possimus dolorem consequatur. 
    </div> 
   </div> 
   <div class="col"> 
    <div class="card"> 
     <h3>Prices</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla et, illum rerum officia perferendis assumenda animi error, fuga ut sunt. 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials