如何使 div 可滚动且高度不会导致父元素溢出？答案

【问题标题】：How to make div scrollable and with a height that doesn't causes the parent element to overflow?如何使 div 可滚动且高度不会导致父元素溢出？
【发布时间】：2021-10-31 00:10:00
【问题描述】：

在我的应用程序中（使用带有 react-bootstrap v2 的 bootstrap 5.1）我有一个父 div，我对其应用了样式 max-height:100vh; 和 d-flex flex-column 类。这个父 div 有 2 个孩子：

包含导航栏的 div；
类为container-fluid and flex-grow-1的div

现在，如果我在容器 div 中应用样式 overflow:'auto';，它将变为可滚动的。 我的目标是能够构建可以自动扩展其高度而不会导致父 div 溢出并自行滚动的组件。

在前面的场景中，我添加了max-height:100vh; 并获得了固定的父级高度，但我无法使用此解决方法来创建所需的组件。

我已经尝试将高度设置为 100%，但它导致父元素溢出。

到目前为止，我用我尝试过的方法创建了一个simple codesandbox example。考虑在不滚动其他 div 的情况下让第 1 列可滚动

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

如果我了解您要完成的工作，您是否希望 Container 元素根据视口高度保持在静态高度，并让组件或 div 在该约束内滚动？如果是这样，我认为这应该可行：

import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import { Container } from "react-bootstrap";
import Navigator from "./Navigator";
import Content from "./Content";

export default function App() {
  return (
    <div className="d-flex flex-column w-100" >
      <div>
        <Navigator />
      </div>
      <div>
        <Container fluid>
          <div className="d-flex" style={{ height: "85vh" }}>
            <div className="px-2" style={{ overflow: "auto" }}>
              <h5>column 1</h5>
              <Content number={15} style={{ width: 200 }}>
                <p>.....................</p>
              </Content>
            </div>
            <div>
              <h5>column 2</h5>
              <Content numeber={3} style={{ width: 200 }}>
                <p>-----------</p>
              </Content>
            </div>
          </div>
        </Container>
      </div>
      <div>
        <Navigator />
      </div>
    </div>
  );
}

我使用 85vh 作为“d-flex”div 高度的示例，因为我不知道您为 Navigator 元素提供的高度。结果是第 1 列滚动的静态容器高度，而不是扩展包含 div 的高度。如果您没有设置导航器元素的高度，但仍希望视口显示所有元素而不滚动，您将需要使用 useEffect 查询这些元素的高度，后期绘制，并根据视口高度进行计算输出容器元素的正确高度。

【讨论】：