html - CSS: Force a column to always have full height -

this question has answer here:

• how can make bootstrap columns same height? 29 answers

i have following html :

<div style="height: 80px">    ... </div> <div class="container-fluid">   <div class="row">     <div class="col-xs-2 col1">...</div>     <div class="col-xs-10 col2">...</div>   </div> </div> 

both col1 , col2 having height: auto; however, col2 gonna bigger col1. don't want col2 have specific height. however, col1 full height , match whatever height col2 has.

how can achieve in css/sass ?

yes can using either flexbox or table:

.row.equal {    display: table;  }  .row.equal .column {    display: table-cell;        /* demo purposes */    max-width: 5em;    border: 1px solid #fff;    background-color: red;  }    .row.equal.flex {    display: flex;  }  .row.equal.flex .column {    /* demo purposes */    max-width: 5em;    border: 1px solid #fff;    background-color: red;  }

<div class="row equal">    <div class="column">      equal height column using table property    </div>    <div class="column">      equal height    </div>  </div>    <div class="row equal flex">    <div class="column">      equal height column using flex property    </div>    <div class="column">      equal height    </div>  </div>

you should pretty safe without using prefixes, sure check out caniuse. luck