How to configure a Bootstrap textarea element to fill the parent div vertically?

I am using bootstrap and plain HTML CSS. I have a <div> tag, which holds 2 divs, where the first <div> has a Bootstrap form-group and a btn-primary. I would like the form for text entry to expand vertically to fill the available height of the <div> it resides in which in the example code below is class="rightupper". At the moment I use in the textarea a style attribute setting of style="height: 30vh;" which does not fit/fill the div it takes vertically. The horizontal width seems to work fine.

The HTML code:

<div class="right">
        <div class="rightupper">
            comments:
            <hr>
            <div class="form-group">
                        
                <textarea class="form-control w-100" style="height: 30vh;" id="descriptionInput" rows="3"></textarea>
            </div>
            <button class="btn btn-primary" type="button">Click Btn</button>

        </div>    
        <div class="rightlower">
            out text
            <hr>
        </div>
    </div>
</div>

How should the <div class="form-group"> or the <textarea class="form-control w-100" style="height: 30vh;" id="descriptionInput" rows="3"> be altered to fit/fill the containing div vertically?

Here is the relevant CSS for these divs;

.right {
  height: 100vh;
  width: 20%;
  border: 2px solid blue;
}
.rightupper {
  height: 50vh;
  width: 100%;
  background-color: rgb(190, 190, 190);
}
.rightlower {
  height: 50vh;
  width: 100%;
  background-color: rgb(190, 190, 190);
  border-top: 5px solid blue;
}

Answer

I prepared 2 approach.

The first is a simple workaround.

The first thing was to change the focus from 20% of the width to col-3 which is what Bootstrap recognizes as ~ 20%. This makes it easier for you to adjust the width when the resolution changes. In the example I included that when decreasing the resolution, 50% of the width is used. You can change that later.

To occupy 100% of the space (or rather 60% to leave space for the title and the button) I included the css .form-group to refer to what was indicated and the tag of the textarea (#descriptionInput) that takes advantage of 100% of the space of the previous div.

I don’t really like this approach, as the changes in resolution require height adjustments. That you must solve with breakpoints.

run codeply

The second approach is based on FLEX.

In this approach I use flex which is naturally included in bootstrap 4.

The idea is to create zones where you can configure what flex does to locate the objects and when the resolution changes.

Flex works by following the parent-child concept. So if you declare flex to the parent, what happens is that you configure how the child will respond.

If you notice, I included classes (title, text and bot) to give individual configuration to their behavior. I included within the css, some settings so that: textarea uses 1005 of the space, and the rest occupies only 5vh.

This way you can configure it for different resolutions and it will adapt height to resolution.

run codeply

For more details of this type of approach, you can see link

Good Luck!