が反応し、私が使用しようとしていますどのようにそれらに

Question

を使用するFlexのレイアウトが反応し、flexbox.Normallyこれは私のCSSファイル

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

あるreact.js

にネイティブが、icouldnt achiveを反応させます

これは私のjsファイルです

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; 

私は問題が発生する可能性があります白い画面を持っていますか？

だから単に .wrapper, html, bodyルールから position: absoluteを削除するには、

Answer 1

wrapperが絶対的に配置されたようありがとう、と一緒に成長するために何のコンテンツ、0

にその幅崩壊を持っていません。

さらにposition: absoluteを使用する場合は、ラッパーにも幅を与える必要があります。

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