Change the background color of the draggable allotment pane

Question

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

I would like to make the background of the pane below green. But after dragging the split, the background color is not systematically updated in that area.

Does anyone know how to amend the code to achieve that?

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

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
import styles from "./App.module.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>
        <div className={styles.container}>
          <Allotment vertical onChange={this.handleChange} ref={this.myRef}>
            <Allotment.Pane>Main Area</Allotment.Pane>
            <Allotment.Pane preferredSize="0%">
              <div
                style={{ backgroundColor: "green" }}
                onClick={() => {
                  if (this.state.toExpand) {
                    this.myRef.current.resize([50, 50]);
                  } else {
                    this.myRef.current.resize([10000, 0]);
                  }
                }}
              >
                Console &nbsp;
                {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
              </div>
            </Allotment.Pane>
          </Allotment>
        </div>
      </div>
    );
  }
}

Answer 1

It seems that the content div can be set to take full height of the panel:

Forked demo with modification: codesandbox

<Allotment.Pane preferredSize="0%">
  <div
    // 👇 Set the content div to take full height
    style={{ backgroundColor: "green", height: "100%" }}
    onClick={() => {
      if (this.state.toExpand) {
        this.myRef.current.resize([50, 50]);
      } else {
        this.myRef.current.resize([10000, 0]);
      }
    }}
  >
    Console &nbsp;
    {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
  </div>
</Allotment.Pane>;