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>