html - How to make inner div full height with unknown height parent? -

i need .col 100% of .row height can see second .col falls short. how can work without using "magic numbers"?

http://jsfiddle.net/b21g6fme/

.row {      position: relative;      background: #f99;  }  .col {      margin: 0 0 0 8px;      display: inline-block;      width: 40%;      position: relative;      vertical-align: top;      background: #999;      height: 100%;  }  .col:first-child {      margin: 0;  }  .item {      display: block;      position: relative;      top: 0;      margin: 12px 0 0 0;      min-height: 80px;      width: 100%;      outline: 4px solid black;  }  .item:first-child {      margin: 0;  }  .item.large {      min-height: 120px;      height: 100%;  }  .item.red {      background: #f00;  }  .item.blue {      background: #0f0;  }  .item.green {      background: #00f;  }

<div class="row">      <div class="col">          <div class="item red"></div>          <div class="item blue"></div>      </div>      <div class="col">          <div class="large item green"></div>      </div>  </div>

this can achieved using flexbox:

• add display: flex; .row. tells children use flexbox model
• add flex-direction: row; .row want children align horizontally
• add display: flex; .col. tells children use flexbox model
• add flex-direction: column; .col want children align vertically
• add flex: 1; .item allow grow , fill available space if required
• a number of styles can removed original version no longer required when using flexbox

.row {      background:#f99;      display: flex;      flex-direction: row;  }  .col {      background: #999;      display: flex;      flex-direction: column;      margin:0 0 0 12px;      width:40%;  }  .col:first-child {      margin:0;  }  .item {      flex: 1;      margin: 12px 0 0 0;      min-height: 80px;      outline:4px solid black;      width: 100%;  }  .item:first-child {      margin:0;  }  .item.red {      background:#f00;  }  .item.blue {      background:#0f0;  }  .item.green {      background:#00f;  }

<div class="row">      <div class="col">          <div class="item red"></div>          <div class="item blue"></div>      </div>      <div class="col">          <div class="large item green"></div>      </div>  </div>

flexbox support pretty good, although isn't supported older versions of ie. http://caniuse.com/#feat=flexbox