如何使Flexbox孩子的身高达到父母的100%？

提问者：小点点

如何使Flexbox孩子的身高达到父母的100%？

我正在尝试填充FlexBox内flex项目的垂直空间。

null

.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>

null

这是JSFiddle

flex-2-child不能填充所需高度，以下两种情况除外:

Flex-2的高度为100%（这很奇怪，因为默认情况下flex项的高度为100%+它在Chrome中有错误）
flex-2-child位置绝对，这也不方便

目前这在Chrome或Firefox中都不起作用。

匿名用户

与David Storey的回答类似，我的解决办法是:

.flex-2 {
    display: flex;
    align-items: stretch;
}

作为align-items的另一种选择，您可以只在要拉伸的.flex-2-child项上使用align-self。

匿名用户

我在这里回答了一个类似的问题。

我知道你已经说过position:absolute；不方便，但它很管用。有关修复大小调整问题的更多信息，请参见下文。

也请看这个jsFiddle的演示，尽管我只在Chrome中添加了如此开放的webkit前缀。

你基本上有两个问题，我将分别处理。

使flex-item的子项填充高度为100%
- 在子级的父级上设置position:relative；。
- 在子项上设置位置:绝对；。
- 然后可以根据需要设置宽度/高度（在我的示例中为100%）。
- 将overflow-y:auto；放在可滚动的分区上。
- 可滚动div必须指定显式高度。我的示例高度已经为100%，但是如果没有应用，您可以指定height:0；
有关滚动问题的更多信息，请参阅此答案。

匿名用户

如果我理解正确的话，你想让flex-2-child填充其父级的高度和宽度，这样红色区域就被绿色完全覆盖了？

如果是，您只需将flex-2设置为使用FlexBox即可:

.flex-2 {
    display: flex;  
}

然后告诉flex-2-child变得灵活:

.flex-2-child {    
    flex: 1;
}

参见http://jsfiddle.net/2zdue/10/

原因是flex-2-child不是flexbox项，但其父项是。

如何使Flexbox孩子的身高达到父母的100%？

共3个答案

相关问题

热门标签

如何使Flexbox孩子的身高达到父母的100%？

共3个答案

相关问题

热门标签

微信关注