Making a flexbox container height 100% in react js

Question

I'm trying to create a flex box container of 3 columns. 3 column part works. But I want them to take complete available height excluding the app bar.

Css

.columnContainer {
    display: flex;
    height: 100%;

}
.leftContainer {
    flex : 1;
    height: 200px;
    background-color: black;
}

.rightContainer {
    flex : 1;
    height: 200px;
    background-color: blue;
}

.middleContainer {
    flex : 3;
    height: 200px;
    background-color: green;
}

I have added 200px just to show those columns on screen. Tried 100% but it didnt show anything.

And in react js part,

<div>
        <HomeBar />
        <div className={'columnContainer'}>
            <div className={'leftContainer'}>

            </div>
            <div className={'middleContainer'}>

            </div>
            <div className={'rightContainer'}>

            </div>
        </div>
      </div>

Need Help :(

Answer 1

You can achieve this by using "vh" units, and it's a more effective way than using percentages because you don't need to set every parent height to 100% if you want the child's height to be 100%.

 .columnContainer { 
   display: flex; 
   height: calc(100vh - 60px);
}

Here is an example of the 60px app bar height being excluded from the viewport height.