I'm having trouble using the .flex-grow-1 class in Bootstrap 4.6.0 (with react-bootstrap 1.5.2) to make a component within my layout expand and fill the remaining vertical space available.
"bootstrap": "^4.6",
"react-bootstrap": "1.5.2",
Below is the code that I have been working on to create a wireframe layout of the screen.
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={{height: "100vw"}}>
<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={{height: "80px"}}>
Welcome To:
</Row>
<Row className="grid" style={{height: "125px"}}>
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={{height: "10%"}}>
e-mail input
</Row>
<Row className="grid" style={{height: "10%"}}>
company name input
</Row>
<Row className="grid" style={{height: "10%"}}>
country input
</Row>
<Row className="grid" style={{height: "10%"}}>
phone number
</Row>
<Row className="grid" style={{height: "10%"}}>
get started button
</Row>
</Col>
<Col className="grid">
{/* body right margin */}
</Col>
</Row>
</Col>
<Col id="right-column" className="grid" style={{height: "100vw"}}>
Right Column
</Col>
</Row>
)
}
}
export default SignUpLayout;
My goal is to make the component labeled as #body expand vertically to fill the remaining available vertical space in the viewport. I have tried using the .flex-grow-1 class but it doesn't seem to be working as expected.
The wireframe layout that I currently have from the above code can be viewed here: https://i.sstatic.net/kbhSR.png
Any help or suggestions would be greatly appreciated.