问题

我使用Bootstrap v5在REACT中创建了一个单页面应用的基本布局。
这个应用包含两列和嵌套的行。我将这两列扩展到屏幕的最大高度。
我不想要浏览器的主滚动条，而是在嵌套的列内部。

我的基本布局：

```html
<div class="container-fluid">
  <div class="row vh-100" style="background-color:aquamarine;">
    <div class="col-md-8 border d-flex flex-column">
      <div class="row border">
        <h1 class="display-4">Headline</h1>
      </div>
      <div class="row border flex-grow-1" style="background-color:blue;">
        Box 1
      </div>
      <div class="row border" style="background-color:red;">
        Box 2
      </div>
    </div>
    <div class="col-md-4 border">
      Box3
    </div>
  </div>
</div>

Box 1已经扩展到完全使用高度。
如果我导入一个在视口中比盒子更高的REACT组件，滚动条会出现吗？这可能吗？如何做到？

我可以通过在我想要包含的REACT组件内添加className="overflow-scroll"来添加滚动条，但这样会忽略列的弹性高度。

提前感谢！
nico

<details>
<summary>英文:</summary>

I created a basic layout for a one page application in REACT by using Bootstrap v5.
The application consists of two columns and nested rows in it. I expand the columns to the max height of the screen. I do not want to have the main scrollbar of the browser but inside the nested columns.

My basics layout:

<div class="container-fluid">
<div class="row vh-100" style="background-color:aquamarine;">
<div class="col-md-8 border d-flex flex-column">
<div class="row border">
<h1 class="display-4">Headline</h1>
</div>
<div class="row border flex-grow-1" style="background-color:blue;">
Box 1
</div>
<div class="row border" style="background-color:red;">
Box 2
</div>
</div>
<div class="col-md-4 border">
Box3
</div>
</div>
</div>

Box 1 is expanded that the complete height is used. If I am importing a REACT component to this box which is higher as the box in the viewport a scrollbar should appear. Is this possible? How?

I can add a scrollbar by `className="overflow-scroll"` inside the REACT component I want to include but than the flex-height of the column is ignored, too. 

Thanks in advance!
nico

</details>


# 答案1
**得分**: 1

这是适用于我的解决方案：

```jsx
<div className="row p-3 overflow-auto flex-grow-1">
  <div style={{"maxHeight": "calc(100vh - 450px)"}}>
    内容
  </div>
</div>

内容是一个PDF，由react-pdf包呈现。

<div className="row p-3 overflow-auto flex-grow-1">
  <div style={{"maxHeight": "calc(100vh - 450px"}}>
    Content
  </div>
</div>