如何使Flexbox子代的父母身高达到100%?
我正在尝试在Flexbox中填充Flex项目的垂直空间。
.container { height: 200px;
width: 500px;
display: flex;
flex-direction: row;
}
.flex-1 {
width: 100px;
background-color: blue;
}
.flex-2 {
position: relative;
flex: 1;
background-color: red;
}
.flex-2-child {
height: 100%;
width: 100%;
background-color: green;
}
<div class="container">
<div class="flex-1"></div>
<div class="flex-2">
<div class="flex-2-child"></div>
</div>
</div>
flex-2-child
不能满足要求的高度,但以下两种情况除外:
flex-2
的高度为100%(这很奇怪,因为弹性商品默认情况下为100%,而且在Chrome中存在错误)flex-2-child
绝对位置也不方便
目前,该功能不适用于Chrome或Firefox。
回答:
回答:
与David Storey的答案类似,我的解决方法是:
.flex-2 { display: flex;
align-items: stretch;
}
或者到align-items
,你可以使用align-self
只是在.flex-2-child
你想拉长项目。
以上是 如何使Flexbox子代的父母身高达到100%? 的全部内容, 来源链接: utcz.com/qa/412395.html