Question

我有（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;
}

Answer 1

如果要使其显示垂直滚动条，则必须给网格一些高度（以像素为单位）。大多数UI都是这种情况，而不仅仅是Devextreme（JS）。如果给它100％的高度，则DOM层次结构中的某些元素必须具有固定的宽度才能起作用。

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

1 个答案: