Reagieren und Flex-Layout, wie sie verwenden

Question

Ich versuche Reagieren zu verwenden und flexbox.Normally kann ich Flexbox verwenden zu reagieren nativen aber icouldnt achive in react.js

das ist meine CSS-Datei

.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 
} 

Das ist mein js

Datei

import React, { Component } from 'react'; 
import './background.css'; 
import { Icon } from 'semantic-ui-react' 
import Navbar from './navbar' 

class Back extends Component { 



    render() { 
    return (
     <div className="wrapper"> 
      <div className="nav"></div> 
      <div className="main"></div> 
     </div> 
    ); 
    } 
} 

export default Back; 

ich habe gerade einen weißen Bildschirm, was ein Problem sein könnte?

Danke

Answer 1

Da die wrapper ist absolut positioniert und haben keinen Inhalt mit wachsen, seine Breite Zusammenbruch auf 0

einfach position: absolute aus der .wrapper, html, body Regel So entfernen. Wenn Sie immer noch position: absolute verwenden möchten, müssen Sie dem Wrapper auch eine Breite geben.

.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>