如何使Flexbox子代的父母身高达到100％？

• Z时代
• 2024-01-10
• 分类：问答

我正在尝试在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 不能满足要求的高度，但以下两种情况除外：

1. flex-2 的高度为100％（这很奇怪，因为弹性商品默认情况下为100％，而且在Chrome中存在错误）
2. 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