Making A Flexbox Container Height 100% In React Js
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 { d
Solution 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.
Solution 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)
classTodoAppextendsReact.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 (
<divclassName={'container'}><divclassName={'columnContainer'}><divclassName={'leftContainer'}></div><divclassName={'middleContainer'}></div><divclassName={'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%;
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="app"></div>
Post a Comment for "Making A Flexbox Container Height 100% In React Js"