I am working with bootstrap along with plain HTML and CSS. In my code, there is a <div> containing two child divs. The first child <div> includes a Bootstrap form-group and a btn-primary. I want the text entry form inside this div to expand vertically and fill the entire available height of the parent <div>, in this case identified as class="rightupper". Currently, I have set the height of the textarea using inline CSS as style="height: 30vh;", however, it's not fitting/filling the container vertically as desired. The width adjustment seems to be functioning properly.
Below is the HTML snippet:
<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>
What adjustments should be made to either the
or the <div class="form-group">
to ensure vertical fitting/filling within the parent div?<textarea class="form-control w-100" style="height: 30vh;" id="descriptionInput" rows="3">
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;
}