Make the first allotment pane scroll

Question

I have made a draggable split panel by https://github.com/johnwalley/allotment.

At the moment, when we drag up the split bar, the first allotment pane does not scroll. I would like to scroll the first allotment pane whenever we move up the split bar. Does anyone know how to do that?

https://codesandbox.io/s/reset-forked-u6qf4p?file=/src/App.js

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
    this.myRef = React.createRef();
  }

  handleChange = (sizes) => {
    if (sizes.length > 1) {
      if (sizes[1] < 31) {
        this.setState({ toExpand: true });
      } else {
        this.setState({ toExpand: false });
      }
    }
  };

  render() {
    return (
      <div
        style={{
          minWidth: 200,
          height: "100vh",
          overflowX: "auto",
          width: "auto",
          margin: "0px 0px 0px 0px"
        }}
      >
        <Allotment
          vertical
          onChange={this.handleChangeAllotment}
          ref={this.myRef}
        >
          <Allotment.Pane>
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
          </Allotment.Pane>
          <Allotment.Pane preferredSize="0%" minSize={20}>
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
          </Allotment.Pane>
        </Allotment>
      </div>
    );
  }
}

Answer 1

From the Allotment documentation

My content is larger than the containing pane. How can I let the user scroll?

The simplest approach is to place your content inside a new div with width and height 100% and overflow auto.
This div will have the same dimensions as the pane it's inside and if its content overflows the browser will provide scrolling behaviour.

---

This can be implemented as follows:

<Allotment.Pane>
    <div style={{ overflowY: "auto", height: "100%" }}>
        long <br /> long <br /> long <br />
        long <br /> long <br /> long <br />
        long <br /> long <br /> long <br />
        long <br /> long <br /> long <br />
    </div>
</Allotment.Pane>

Which makes the pane scrollable if the length is to large.

_{Tip: If you need this multiple times, consider creating a custom component that will return your content wrapped in a <div> and <Allotment.Pane>}

---

Updated Snippet:

Screen recording of scrollable element:
https://www.kapwing.com/videos/641989933c5dc001fa96500c