Как установить высоту текстовой области, чтобы заполнить весь столбец?

Question

Я пишу простую контактную форму, используя bootstrap-4. У меня 1 строка с 2 столбцами. Левый столбец содержит объекты ввода текста и объект выделения. Правая колонка содержит текстовую область. Я пытаюсь сделать текстовую область той же высоты, что и левый столбец.

Я применил класс h-100 к тегу textarea и parent, но он выше, чем левый столбец.

ссылка на скриншот: 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

Вы можете использовать служебные классы flexbox (d-flex flex-column), чтобы текстовая область заполнила оставшуюся высоту (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> 

Демонстрация: https://www.codeply.com/go/2z4ckbR2FU