Css 为什么Devextreme网格溢出其父容器，为什么它不创建垂直滚动条？

我有一个包含大量项的Devextreme网格（下面的代码只显示了其中的一部分），问题是网格溢出了包含该网格的div元素。我想让网格创建内部滚动条，并尊重包含div元素所提供的可用空间。我该怎么做

我有以下代码：

import React from "react";
import ReactDOM from "react-dom";
import {
  Grid,
  Table,
  TableHeaderRow
} from "@devexpress/dx-react-grid-bootstrap4";
import "@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css";
import "./styles.css";

//

function App() {
  return (
    <div className="App">
      <Grid
        className="grid"
        rows={[
          { id: 0, product: "DevExtreme", owner: "DevExpress" },
          { id: 1, product: "DevExtreme Reactive", owner: "DevExpress" },
          { id: 2, product: "DevExtreme", owner: "DevExpress" },
          { id: 3, product: "DevExtreme Reactive", owner: "DevExpress" },
          { id: 4, product: "DevExtreme", owner: "DevExpress" },
]}
        columns={[
          { name: "id", title: "ID" },
          { name: "product", title: "Product" },
          { name: "owner", title: "Owner" }
        ]}
      >
        <Table />
        <TableHeaderRow />
      </Grid>
    </div>
  );


html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#root {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.App {
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: sans-serif;
  text-align: center;
  background-color: rosybrown;
}

.grid {
  width: 100%;
  height: 100%;
  background-color: magenta;
}

从“React”导入React；
从“react dom”导入react dom；
进口{
网格
桌子
台头
}来自“@devexpress/dx-react-grid-bootstrap4”；
导入“@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css”；
导入“/styles.css”；
//
函数App（）{
返回(
);
html，
身体{
宽度：100%；
身高：100%；
边际：0px；
}
#根{
宽度：100%；
身高：100%；
边际：0px；
}
.App{
宽度：100%；
身高：100%；
边际：0px；
字体系列：无衬线；
文本对齐：居中；
背景色：玫瑰色；
}
.电网{
宽度：100%；
身高：100%；
背景色：洋红色；
}

如果你想让网格显示垂直滚动条，你必须给它一些高度（以像素为单位）。这是大多数UI的情况，而不仅仅是Devextreme（JS）。如果你给它100%的高度，DOM层次结构中的某些元素必须有固定的宽度才能工作