React页面不可滚动

Question

我无法使页面可滚动该代码如下所示，我没有使用任何CSS，我仍然是新的蜜蜂，我使用了MAP函数来渲染我已经使用道具发送数据的组件因为填补空间，什么也没

import { SimpleGrid, Flex } from "@chakra-ui/react";
import React, { useEffect, useState } from "react";

import Doccard from "../../components/doccard";
import { docdata } from "./docdat";
import data from "./docdat.json";
import Navbar from "../../components/Navbar";
import axios from "axios";


const url1 = "http://localhost:7000/doctors";

function Doctors() {
  const [docdatai, setdocdatai] = useState([]);

  useEffect(() => {
    axios
      .get(url1)
      .then((Response) => {
        console.log(Response.data);
        setdocdatai(Response.data);
      })
      .catch((err) => {
        console.log("error fetching data");
      });
    console.log("fetched");
  }, []);

  return (
    <div className="scrollable-div" style={{ overflow: "scroll" }}>
      <br />
      <br />
      <SimpleGrid columns={[2, 3, 5]} spacing={"20"} mt={4} mx={10}>
        {console.log(docdatai)}
        {docdatai.map((cardinfo, index) => {
          return (
            <Doccard
              name={cardinfo.name}
              username={cardinfo.username}
              specialization={cardinfo.specialization}
            />
          );
        })}
      </SimpleGrid>
    </div>
  );
}

export default Doctors;

Answer 1

使用Overflow-Y：自动用于在内容超过DIVS设置高度时自动显示滚动。

来自zword的答案，在这里

请记住，只有当内部内容比内部的内容高时，DIV才能滚动设置高度（您可能需要将高度设置为100VH，将宽度设置为100VW，以将高度/宽度设置为屏幕的100％）。如果要使DIV X轴可滚动，请将其更改为Overflow-X：auto，如果您希望它同时进行，请使用溢出：auto