फ्लेक्स कंटेनर

Question

में बच्चे तत्व दिखाई नहीं दे रहे हैं। मैंने अपने divs को कंटेनर {डिस्प्ले: फ्लेक्स} में इनपुट किया है। एक बार जब मैं डिस्प्ले से छुटकारा पाता हूं: फ्लेक्स यह ठीक काम करता है और मैं अपना एचटीएमएल देख सकता हूं। इसके अलावा मैंने पाया कि यदि मैं अपना प्रतिशत पीएक्स में बदलता हूं तो मैं अपना पेज देख सकता हूं।

यह क्यों है?

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    margin-top: .2%; 
 
} 
 
#container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
#one { 
 
    float: left; 
 
    background-color: black; 
 
    width: 25%; 
 
    height: 100vh; 
 
    margin-left: 2%; 
 
} 
 
#two { 
 
    float: right; 
 
    background-color: grey; 
 
    width: 70.5%; 
 
    height: 100vh; 
 
    margin-right: 2%; 
 
}

<div id="container"> 
 
    <div id="row"> 
 
    <div id="one"></div> 
 
    <div id="two"></div> 
 
    </div> 
 
</div>

Answer 1

html, body{ height:100%;} /* not needed but good to have it */ 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    /*margin-top: .2%; /* why? it'll mess with vh100 adding scrollbars.. */ 
 
} 
 
/*#container { you mean... */ 
 
#row { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
#one { 
 
    /* float: left; /* unnecessary, now parent is flex */ 
 
    background-color: black; 
 
    width: 25%; 
 
    height: 100vh; 
 
    margin-left: 2%; 
 
} 
 
#two { 
 
    /* float: right; /* unnecessary, now parent is flex */ 
 
    background-color: grey; 
 
    width: /*70.5%; you mean... */ 71%; 
 
    height: 100vh; 
 
    margin-right: 2%; 
 
}

<div id="container"> 
 
    <div id="row"> 
 
    <div id="one"></div> 
 
    <div id="two"></div> 
 
    </div> 
 
</div>