Proper height of a child area of the draggable allotment pane

Question

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

There is a main area (in yellow) and a console area; the console area has a title line (in blue) and the content area (in green). The splitting line between the main area (in yellow) and the title line (in blue) is draggable. The content area (in green) should be scrollable.

At the moment, I set height: "70%" for the content area. If I set height: "100%" (relative to its parent which is the second Allotment.Pane), it would exceed the screen.

However, I would like to set properly the height of the content area such that the content area always covers the rest of the page. In other words, the height of the content area will be the height of the viewport - the height of the main area (which is changeable) - the height of the console title line (which does not change).

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

https://codesandbox.io/s/reset-forked-jb86xu?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>
              <div style={{ backgroundColor: "yellow", height: "100%" }}>
                Main Area
              </div>
            </Allotment.Pane>
            <Allotment.Pane preferredSize="0%">
              <div
                onClick={() => {
                  if (this.state.toExpand) {
                    this.myRef.current.resize([50, 50]);
                  } else {
                    this.myRef.current.resize([10000, 0]);
                  }
                }}
                style={{ backgroundColor: "blue" }}
              >
                Console Title &nbsp;
                {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
              </div>
              <div
                style={{
                  backgroundColor: "green",
                  height: "70%",
                  overflow: "scroll"
                }}
              >
                Content1
                <br />
                Content2
                <br />
                Content3
                <br />
                Content4
                <br />
                Content5
                <br />
              </div>
            </Allotment.Pane>
          </Allotment>
        </div>
      </div>
    );
  }
}

Answer 1

Not sure if I fully understand the preferred result, but perhaps consider to wrap the 2 area boxes in the second panel in one flex container with height: 100% . This way, the green "content" area could be styled to take the remaining space with flex-grow instead of percentage.

Forked demo with modifications: codesandbox (it seems that the forked demo need to run in a new tab to avoid showing a page scrollbar).

<div className={styles.container}>
  <Allotment vertical onChange={this.handleChange} ref={this.myRef}>
    <Allotment.Pane>
      <div style={{ backgroundColor: "yellow", height: "100%" }}>Main Area</div>
    </Allotment.Pane>
    <Allotment.Pane preferredSize="0%">
      <section
        style={{
          height: "100%",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <div
          onClick={() => {
            if (this.state.toExpand) {
              this.myRef.current.resize([50, 50]);
            } else {
              this.myRef.current.resize([10000, 0]);
            }
          }}
          style={{ backgroundColor: "blue" }}
        >
          Console Title &nbsp;
          {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
        </div>
        <div
          style={{
            backgroundColor: "green",
            flexGrow: "1",
            overflow: "auto",
          }}
        >
          Content1
          <br />
          Content2
          <br />
          Content3
          <br />
          Content4
          <br />
          Content5
          <br />
        </div>
      </section>
    </Allotment.Pane>
  </Allotment>
</div>