为什么 Devextreme 网格溢出它的父容器，为什么它没有创建垂直滚动条？答案

【问题标题】：Why Devextreme grid is overflowing its parent container and why it is not creating vertical scrollbars?为什么 Devextreme 网格溢出它的父容器，为什么它没有创建垂直滚动条？
【发布时间】：2019-01-15 21:45:03
【问题描述】：

我有 (https://codesandbox.io/s/9zok7jx4ro) 包含大量项目的 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;
}

【问题讨论】：

标签： css reactjs scrollbar devextreme

【解决方案1】：

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

【讨论】：