How to set the height of textarea to fill the whole column? - html

Question

I am writing simple contact form using bootstrap-4. I have 1 row with 2 columns. Left column contains input text objects and selection object. Right column contains textarea. I try to make textarea the same hight as left col.
I aplied h-100 class into the textarea and parent div but it's higher than the left col.
link to the screenshot: https://i.imgur.com/Lrfwhtn.png
<div id="content" class="margin-from-nav">
<div class="container">
<form>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="form-group">
<label for="inputName1">Imię</label>
<input type="text" class="form-control" id="inputName1" placeholder="Imie">
</div>
<div class="form-group">
<label for="inputName2">Nazwisko</label>
<input type="text" class="form-control" id="inputName2" placeholder="Nazwisko">
</div>
<div class="form-group">
<label for="inputEmail4">Adres e-mail</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group">
<label class="mr-sm-2" for="inlineFormCustomSelect">Temat zapytania</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Wybierz temat...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="form-group h-100">
<label for="exampleFormControlTextarea1">Treść wiadomości</label>
<textarea class="h-100 form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
</div>
</div>
</form>
</div>
</div>

Answer 1

You can use the flexbox utility classes (d-flex flex-column) to make the textarea fill the remaining height (flex-grow-1):
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 d-flex flex-column">
<div class="form-group flex-grow-1 d-flex flex-column">
<label for="exampleFormControlTextarea1">Treść wiadomości</label>
<textarea class="form-control flex-grow-1" id="exampleFormControlTextarea1"></textarea>
</div>
</div>
Demo: https://www.codeply.com/go/2z4ckbR2FU