0
尝试使用flexbox使div(绿色)填充其父(红色)的剩余垂直空间。我做错了什么或只是没有得到它。任何人都可以检查吗? JSFiddleFlexbox拉伸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>
你可能将不得不使用整个而非混合花车和Flexbox的Flexbox的。还设置一些最低高度为100% –