Flexbox-兒童高度不是100％

Question

我有一個像這樣的基本Flex布局

 .container { display:flex; width:100%; justify-content: space-between; height:100%; } .left { width: calc(61.8034% - ( 0.38196600790794 * 20px ) ); } .right { width: calc(38.1966% - ( 0.61803399209206 * 20px ) ); } .left, .right { height:100%; height:100%; } .image_container { background:red; height:100%; } .image_container img { display:none; } .image_16x9_container{ background:green; display: block; height: 0; padding-bottom: 56.25%; overflow: hidden; } 

 <div class="container"> <div class="left"> <div class="image_container"> This is some example text </div> </div> <div class="right"> <div class="image_16x9_container"> <img src="https://picsum.photos/500/500"> </div> </div> </div> 

我想不出為什么左手div不是100％的高度，我假設使父div為flex會自動處理這個問題。

我要去哪里錯了？

Answer 1

沒錯，但是您不必在flex項目上設置height:100% ， 因為它不起作用，並且會破壞默認的拉伸行為，默認情況下該行為使元素默認為100％高度：

 .container { display: flex; width: 100%; justify-content: space-between; } .left { width: calc(61.8034% - ( 0.38196600790794 * 20px)); } .right { width: calc(38.1966% - ( 0.61803399209206 * 20px)); } .image_container { background: red; height: 100%; } .image_container img { display: none; } .image_16x9_container { background: green; display: block; height: 0; padding-bottom: 56.25%; overflow: hidden; } 

 <div class="container"> <div class="left"> <div class="image_container"> This is some example text </div> </div> <div class="right"> <div class="image_16x9_container"> <img src="https://picsum.photos/500/500"> </div> </div> </div>