ResizableBox 不包装内容

Question

我正在使用ResizeBox 并希望将内容包装在其中。但是，它不起作用。代码在这里的沙箱中。我也尝试过使用其他组件（div 除外）并且发生了同样的问题。

import React from "react";
import { ResizableBox } from "react-resizable";
import "react-resizable/css/styles.css";
import "./style.css";

const Box = () => {
  return (
    <ResizableBox className="box borderBlack" width={200} height={200} axis="y">
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
      <div>tXYZ!!</div>
    </ResizableBox>
  );
};

export default Box;

https://codesandbox.io/s/create-react-app-with-typescript-forked-u5dwp?file=/src/App.tsx

Answer 1

.react-resizable {
   overflow-y: auto;
}