React And Flex Layout How To Use Them

I am trying to use React and flexbox.Normally i can use flexbox at react native but icouldnt achive in react.js this is my Css file .wrapper, html, body { height:100%; marg

Solution 1:

As the wrapper is positioned absolute, and have no content to grow with, its width collapse to 0.

So simply remove position: absolute from the .wrapper, html, body rule.

If you still want to use position: absolute, you need to also give the wrapper a width.

.wrapper,
html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.nav {
  background-color: red;
  flex: 1
}

.main {
  background-color: blue;
  flex: 1
}

<div class="wrapper">
  <div class="nav"></div>
  <div class="main"></div>
</div>

Solution 2:

You can also use float:left in the wrapper class.