html - Textarea doesn't fill parent div's height -

i'm trying make 2 columns (one photo , selection, , other textarea). need textarea same height column photo, button , selection.

i painted right div black , of "flex" has same size left one. setting height=100% !improtant; textarea doesn't help.

also, setting height=500px !important works , make 500px, size changing. 100% don't give me proper result.

.modalimg {    width:100%;    max-height:100px;    margin-bottom:5px;  }    .modalimg + button {    margin-bottom:5px;  }    .row-eq-height {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;  }

<div class="form-group row-eq-height">    <div class="col-sm-2 col-sm-offset-1">      <img src="https://pp.vk.me/c637522/v637522431/7314/of3uboieb8o.jpg" class="modalimg col-sm-12 img-rounded">      <button class="btn col-sm-12 btn-primary">upload</button>      <select class="form-control">        <option>one</option>        <!--set of options-->      </select>    </div>    <div class="col-sm-9 " style="background: #000000;">      <textarea type="text" placeholder="body" class="form-control body-field row-eq-height"></textarea>    </div>  </div>       

you have applied 'display:flex;' wrong element. add flex textarea container, i.e.

.col-sm-9, .row-eq-height {   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex; }