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

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>

@ShivKumarBaghel - maybe there is no additional CSS (other than Bootstrap) — Zim
You can add to the Text area max-height: 296px;. and the answer with the flex look good. — Omer

Zim Zim · Accepted Answer · 2019-10-11T10:01:24

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

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

1 Answers