How to make children 100% height of their flexbox parent without adding a 100% height to each child

Question

I have a row with nested columns on my website which has bootstrap 3. The .column class has the background. I want the background color to fill the full height without changing the HTML.

If I add height: 100%; to the nested row, bootstrap col and to their column class I get the result I want, but is it possible to write this easier?

Here is my code

https://codepen.io/Insane415/pen/rZWYOE

<div class="container">
   <div class="row sub-heading">
      <div class="col-xs-12 col-sm-12 col-md-6">
         <div class="column">
            Lorem Ipsum Lorem Ipsum <br>Break
         </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-6">
         <div class="row sub-heading full-height">
            <div class="col-xs-4 full-height">
               <div class="column full-height"></div>
            </div>
            <div class="col-xs-4">
               <div class="column"></div>
            </div>
            <div class="col-xs-4">
               <div class="column"></div>
            </div>
         </div>
      </div>
   </div>
</div>

.sub-heading {
  display: flex;
}

.column {
  background: #fce6cc;
  position: relative;
  margin: 0 -13px;
  min-height: 30px;
  padding: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.full-height {
  height: 100%;
}

Answer 1

Without changing HTML:

 .sub-heading { height: 100%; } .sub-heading > div { background: pink; } .column { position: relative; margin: 0 -13px; min-height: 30px; padding: 0 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .sub-heading { display: flex; } .sub-heading > div { border-left: 5px solid #fff; border-right: 15px solid #fff; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row sub-heading"> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="column"> Lorem Ipsum Lorem Ipsum <br>Break </div> </div> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="row sub-heading full-height"> <div class="col-xs-4 full-height"> <div class="column full-height"></div> </div> <div class="col-xs-4"> <div class="column"></div> </div> <div class="col-xs-4"> <div class="column"></div> </div> </div> </div> </div> </div> 

Answer 2

as per my understanding i shared the snippet , i hope it will helps u

  .sub-heading { display: flex; position: relative; min-height: 100%; border: 1px solid #eee; } .column { background: #fce6cc; position: relative; border:1px solid #333; margin: 0 -13px; min-height: 30px; padding: 0 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .sub-heading .column{ min-height: 100%; } 

 <div class="container"> <div class="row sub-heading"> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="column"> Lorem Ipsum Lorem Ipsum <br>Break </div> </div> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="row sub-heading"> <div class="col-xs-4"> <div class="column"></div> </div> <div class="col-xs-4"> <div class="column"></div> </div> <div class="col-xs-4"> <div class="column"> </div> </div> </div> </div> </div> </div>