React Dynamically-Calculated Parent

Size a child using percentage, with an undefined parent height

by SNicholson99

HTML

<div id="app"></div>

React

class App extends React.Component {
  constructor() {
    super()
    this.state = {
			height: null
    }
  }
  
  calculateHeight = () => {
    this.setState({height: null}, () => {
      const height = document.getElementById('div-to-calculate').clientHeight
      this.setState({ height })
      console.log('height', height)
    });
  }
  
  componentDidMount() {
    this.calculateHeight();
    window.addEventListener("resize", this.calculateHeight);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.calculateHeight);
  }
  
  render() {
    return (
      <div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <div style={{
          flex: '0 0 50px',
          backgroundColor: 'blue',
          color: 'white'
        }}>
          Header
        </div>
        <div id="div-to-calculate" style={{
          flex: '1 0 auto',
          height: this.state.height ? `${this.state.height}px` : null
        }}>
          <div style={{ display: 'flex', height: '70%' }}>
            <div style={{ flex: '1 0 auto', backgroundColor: 'yellow' }}>
              <div style={{
                textAlign: 'center',
                width: '250px',
                margin: '0 auto',
                border: '1px solid black',
                position: 'relative',
                top: '50%',
                transform:'translateY(-50%)'
              }}>
                Middle Section
              </div>
            </div>
          </div>
        </div>
        <div style={{
          flex: '0 0 50px',
          backgroundColor: 'red',
          color: 'white'
        }}>
          Footer
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))