Making a flexbox container height 100% in react js - html

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.

Answer 2

see patelarpan's answer for a easy way to do this
You have to set the outermost container's height to 100%. Here is your fixed code(based on your fiddle)
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
items: [{
text: "Learn JavaScript",
done: false
},
{
text: "Learn React",
done: false
},
{
text: "Play around in JSFiddle",
done: true
},
{
text: "Build something awesome",
done: true
}
]
}
}
render() {
return (
<div className={'container'}>
<div className={'columnContainer'}>
<div className={'leftContainer'}>
</div>
<div className={'middleContainer'}>
</div>
<div className={'rightContainer'}>
</div>
</div>
</div>
)
}
}
ReactDOM.render( < TodoApp / > , document.querySelector("#app"))
html,
body {
height: 100%;
}
#app {
height: 100%;
}
.container {
height: 100%;
margin: 0px;
padding: 0px;
}
.columnContainer {
display: flex;
height: 100%;
}
.leftContainer {
height: 100%;
flex: 1;
margin: 10px;
background-color: black;
}
.rightContainer {
flex: 1;
margin: 10px;
background-color: black;
height: 100%;
}
.middleContainer {
flex: 2;
margin: 10px;
background-color: black;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>