title: React and Flex layout how to use them
body: <p>I am trying to use React and flexbox.Normally i can use flexbox at react native but icouldnt achive in react.js</p>
  
  <p>this is my Css file</p>
  
  <pre><code>.wrapper, html, body {
      height:100%;
      margin:0;
      position:absolute;
  }
  .wrapper {
      display: flex;
      flex-direction: column;
  }
  .nav {
      background-color: red;
      flex:1
  }
  .main {
      background-color: blue;
      flex:1
  }
  </code></pre>
  
  <p>This is my js file </p>
  
  <pre><code>import React, { Component } from 'react';
  import './background.css';
  import { Icon } from 'semantic-ui-react'
  import Navbar from './navbar'
  
  class Back extends Component {
  
  
  
    render() {
      return (
        &lt;div className="wrapper"&gt;
            &lt;div className="nav"&gt;&lt;/div&gt;
            &lt;div className="main"&gt;&lt;/div&gt;
         &lt;/div&gt;
      );
    }
  }
  
  export default Back;
  </code></pre>
  
  <p>I got just a white screen what might be a problem ?</p>
  
  <p>Thank you  </p>