.flex-grow-1 on react-bootstrap

I'm struggling to get .flex-grow-1 in Bootstrap 4.6.0 (with react-bootstrap 1.5.2) to get a component on my layout to expand to fill the remaining vertical space available.

"bootstrap": "^4.6",  "react-bootstrap": "1.5.2",  

The following code produces a wireframe of the screen layout that I am trying to build.

import React, { Component } from "react";  import { Col, Row } from "react-bootstrap";  import './SingleSignIn.scss'      class SignUpLayout extends Component {    constructor(props) {      super(props);      this.state = {      };    }      render() {      const { country } = this.state;      return (        <Row>          <Col id="left-column" className="grid bg-warning" style=>            <Row className="grid flex-nowrap">              <Col className="grid">                {/* left margin */}              </Col>              <Col className="grid" xs={6} sm={6} md={6} lg={6} xl={6}>                <Row className="grid" style=>                  Welcome To:                </Row>                <Row className="grid" style=>                  logo goes here                </Row>              </Col>              <Col className="grid">                {/* right margin */}              </Col>            </Row>            <Row id="body" className="grid bg-danger flex-grow-1 flex-nowrap">              <Col className="grid">                {/* body left margin */}              </Col>              <Col className="grid" xs={10} sm={10} md={8} lg={8} xl={8}>                <Row className="grid" style=>                  e-mail input                </Row>                <Row className="grid" style=>                  company name input                </Row>                <Row className="grid" style=>                  country input                </Row>                <Row className="grid" style=>                  phone number                </Row>                <Row className="grid" style=>                  get started button                </Row>              </Col>              <Col className="grid">                {/* body right margin */}              </Col>            </Row>          </Col>          <Col id="right-column" className="grid" style=>            Right Column          </Col>        </Row>      )    }  }    export default SignUpLayout;  

My intention is to get the component identified as #body to grow vertically to fill the remaining vertical space available on the viewport. I'm using the .flex-grow-1 class to try to accomplish this based on other similar posts that I came across in my search but it's not having the desired effect.

The resulting wireframe layout that I get from the above code is the following:

Thanks in advance for the pointers.

https://stackoverflow.com/questions/66837802/flex-grow-1-on-react-bootstrap-row-not-filling-vertical-space March 28, 2021 at 10:06AM