Html 如何配置引导textarea元素以垂直填充父div？

我使用的是引导和纯HTML CSS。我有一个

标签，它包含两个div，其中第一个

有一个

引导
表单组
和一个
btn主
。我希望文本输入表单垂直展开，以填充它所在的
的可用高度，下面的示例代码是
class=“rightupper”
。目前，我在
文本区域中使用了
style=“height:30vh；”
的样式属性设置，该设置不适合/填充垂直方向上的div。水平宽度似乎很合适

HTML代码：

<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>

我准备了2种方法

第一个是一个简单的解决方法。

第一件事是将焦点从宽度的20%更改为col-3，这是Bootstrap识别的~20%。这使您在分辨率更改时更容易调整宽度。在这个例子中，我提到当降低分辨率时，使用了50%的宽度。你可以以后再改

为了占据100%的空间（或者更确切地说是60%的空间来为标题和按钮留出空间），我加入了css.form组，以引用所指示的内容和textarea（#descriptionInput）的标记，该标记利用了上一个div的100%空间

我真的不喜欢这种方法，因为分辨率的变化需要调整高度。必须使用断点解决的问题


第二种方法基于。

在这种方法中，我使用flex，它自然包含在Bootstrap4中

这样做的目的是创建区域，您可以在其中配置flex如何定位对象以及分辨率何时更改

Flex遵循父子概念工作。因此，如果您向父级声明flex，那么所发生的事情就是配置子级将如何响应

如果您注意到了，我包括了类（标题、文本和bot），为它们的行为提供单独的配置。我在css中加入了一些设置，这样：textarea使用1005的空间，其余的只占用5vh

通过这种方式，您可以将其配置为不同的分辨率，并根据分辨率调整高度


有关这种方法的更多详细信息，请参见

祝你好运
 伟大的代码示例和奇妙的链接！

.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;
}