React Changing Route Breaks Height With Layout

I have a React application where if I change the route to a page with a small height the entire body doesn't have a max height for the window (the html does have full height). I ha

Solution 1:

I managed to get a fix, this is quite a specific problem (which I've gather from the lack of response). But in-case anyone else stumbled across a problem like this.

All of my pages components had the following render:

export default class About extends React.Component {
    render() {
        return (
            <div className="content-wrapper">
                {/* All my about code goes in here */}
            </div>
        )
    }
}

I ended up removing the content-wrapper classNames from all the page container dividers and did the following to the Layout page:

export default class Layout extends React.Component {
    render() {
        const { location } = this.props

        return (
            <div className="wrapper">
                <DevTool /> {/* Remove for PRODUCTION */}
                <Header />
                <Sidebar />
                <div className="content-wrapper">
                    {this.props.children}
                </div>
                <Footer />
                <Control />
                <div className="control-sidebar-bg"></div>
            </div>
        )
    }
}

This solved all my problems :)