utkillr utkillr - 3 months ago 15
CSS Question

Textarea doesn't fill parent div's height

I'm trying to make two columns (one with photo and selection, and other with textarea). I need my textarea to be the same height as column with photo, button and selection.

I painted right DIV to black and with help of "flex" it has the same size as left one. But setting

height=100% !improtant;
to textarea doesn't help.

Also, setting
height=500px !important
works well and make it 500px, so size is really changing. But 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>




Answer

You have put applied the 'display:flex;' to the wrong element. Simply add the flex to the textarea container, i.e.

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