Css 设置初始大小并记住分配的最后大小

我已经制作了一个https://github.com/johnwalley/allotment倍的可拖动拆分面板.

我想要认识到几件事:

1. 点击Expand or collapse the allotment B将展开或折叠分配B.
2. 我们可以拖动拆分器，拆分器的位置在折叠分配B之前被保存，这样我们可以在展开分配B时返回到该位置.
3. 当我们第一次扩展分配B时，我希望分配B的高度是整个高度的五分之一.

我编写的代码如下(https://codesandbox.io/s/reset-forked-f2f386?file=/src/App.js).我无法同时意识到这一点.

有人知道为什么会是这样吗？

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

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

  handleChangeAllotment = (sizes) => {
    if (sizes.length > 1) {
      if (sizes[1] < 31) {
        this.setState({ toExpand: true });
      } else {
        this.setState({
          toExpand: false,
          lastExpandedSize: sizes // removing this line will set the initial sizes correctly, but will not be able to save last sizes.
        });
      }
    }
  };

  undertakeExpandOrCollapse = () => {
    if (this.state.toExpand) {
      this.myRef.current.resize(this.state.lastExpandedSize);
    } else {
      this.myRef.current.resize([10000, 0]);
    }
  };

  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>
            <span onClick={this.undertakeExpandOrCollapse}>
              Expand or collapse the allotment B
            </span>
          </Allotment.Pane>
          <Allotment.Pane preferredSize="0%" minSize={30}>
            the allotment B
          </Allotment.Pane>
        </Allotment>
      </div>
    );
  }
}