Flexbox拉伸div高度以填充父div的剩餘高度

嘗試使用flexbox使div（綠色）填充其父（紅色）的剩餘垂直空間。我做錯了什麼或只是沒有得到它。任何人都可以檢查嗎？ JSFiddle Flexbox拉伸div高度以填充父div的剩餘高度

我的代碼迄今：

<div id="container"> 
     <div id="left-col"> 
     <div> 
     </div> 
     <p>Test content</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     <p>longer</p> 
     </div> 
     <div id="right-col" class="flexbox"> 
     <div id="pink"> 
      <p>I am pink</p> 
      <div> 
      <div id="yellow">I am yellow</div> 
      <div id="green" class="flex"> 
       <div id="white-border" class="flex-child"> 
       I have a white border 
       </div> 
      </div> 
      </div> 
     </div> 


<style> 
    #container { 
     overflow: hidden; 
     width: 100%; 
    } 

    #left-col { 
     float: left; 
     width: 50%; 
     background-color: orange; 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
    } 

    .flexbox { 
     float: right; 
     width: 50%; 
     margin-right: -1px; 
     /* Thank you IE */ 
     border-left: 1px solid black; 
     background-color: red; 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     -webkit-flex-direction: column; 
     -moz-flex-direction: column; 
     -ms-flex-direction: column; 
     flex-direction: column; 
    } 

    .flex { 
     background-color: green; 
     -webkit-box-flex: 1; 
     /* OLD - iOS 6-, Safari 3.1-6 */ 
     -moz-box-flex: 1; 
     /* OLD - Firefox 19- */ 
     width: 100%; 
     /* For old syntax, otherwise collapses. */ 
     -webkit-flex: 1; 
     /* Chrome */ 
     -ms-flex: 1; 
     /* IE 10 */ 
     flex: 1; 
     /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
    } 

    .flex-child { 
     width: 50%; 
     height: 5vw; 
     border: 1px solid white; 
    } 

    #pink { 
     background-color: pink; 
    } 

    #yellow { 
     height: 20vw; 
     width: 50%; 
     background-color: yellow; 
    } 
</style>

來源

2016-07-27 Eddy

你可能將不得不使用整個而非混合花車和Flexbox的Flexbox的。還設置一些最低高度爲100％ –

我試圖簡化一切一點點。

看一看下面：

.container, .right-col { 
 
display: flex; 
 
} 
 

 
.left-col, 
 
.right-col, 
 
.right-col-box-3 { 
 
flex-grow:1; 
 
} 
 

 
.left-col { 
 
background-color: orange; 
 
} 
 

 
.right-col { 
 
border-left: 1px solid rgb(0,0,0); 
 
background-color: rgb(255,0,0); 
 
flex-direction: column; 
 
} 
 

 
.right-col-box-1 { 
 
background-color: rgb(255,192,203); 
 
} 
 

 
.right-col-box-2, 
 
.right-col-box-4 { 
 
width: 50%; 
 
} 
 

 
.right-col-box-2 { 
 
height: 20vw; 
 
} 
 

 
.right-col-box-2 { 
 
background-color: rgb(255,255,0); 
 
border: 1px solid rgb(255,255,0); 
 
} 
 

 
.right-col-box-3 { 
 
background-color: rgb(0,128,0); 
 
} 
 

 
.right-col-box-4 { 
 
height: 5vw; 
 
border: 1px solid rgb(255,255,255); 
 
}

<div class="container"> 
 

 
<div class="left-col"> 
 
<p>Test content</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
<p>longer</p> 
 
</div> <!-- End of .left-col --> 
 

 
<div class="right-col"> 
 

 
<div class="right-col-box-1"> 
 
<p>I am pink</p> 
 
<div class="right-col-box-2"><p>I am yellow</p></div> 
 
</div> <!-- End of .right-col-box-1 --> 
 

 
<div class="right-col-box-3"> 
 
<div class="right-col-box-4"><p>I have a white border</p></div> 
 
</div> <!-- End of .right-col-box-3 --> 
 

 
</div> <!-- End of .right-col --> 
 

 
</div> <!-- End of .container -->

來源

2016-07-27 12:34:59 Rounin

Flexbox拉伸div高度以填充父div的剩餘高度

回答

相關問題