Make flex child to grow according to sibling's height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Height

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

Description

Make flex child to grow according to sibling's height

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

article {<!-- w ww  . java 2  s  . c o m-->
   /* float: left; */
   width: 50%;
   padding-right: 0.75em;
   display: flex;
   flex-direction: column;
}
article > a {
   flex: 1; 
   display: flex; 
}
.article-type-wrapper {
   display: block;
   background-color: red;
   color: white;
   padding-top: 15px;
   padding-bottom: 15px;
   height: 60px;
}
header {
   padding: 0 1.5em 20px 1.5em;
   background: url(https://www.java2s.com/style/demo/InternetExplorer.png);
   background-size: cover;
   width: 100%; 
   box-sizing: border-box; 
}
h3 {
   flex: 1 0 auto;
   margin: 0;
   padding-top: 60px;
   padding-bottom: 60px;
   padding-left: 25px;
   font-weight: lighter;
   color: black;
}
* {
   box-sizing: border-box;
}
.flex-wrapper {
   display: flex;
   flex-direction: row;
}


      </style> 
 </head> 
 <body> 
  <div class="flex-wrapper"> 
   <article> 
    <div class="article-type-wrapper"> 
     <div class="article-types"> 
      <span class="article-type">Image Gallery</span> 
     </div> 
    </div> 
    <a href="#"> 
     <header class="article-header"> 
      <h3>this is a test this is a test this is a test</h3> 
     </header> </a> 
   </article> 
   <article> 
    <div class="article-type-wrapper"> 
     <div class="article-types"> 
      <span class="article-type">Image Gallery</span> 
     </div> 
    </div> 
    <a href="#"> 
     <header class="article-header"> 
      <h3>Short title</h3> 
     </header> </a> 
   </article> 
  </div>  
 </body>
</html>

Related Tutorials