ResizableBox doesn't wrap contents

Question

I'm using ResizeBox and want to wrap the contents inside of it. However, it's not working. The code is in the sandbox here. I've tried with other components too (other than div) and the same problem happens.

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;
}