如何使Flexbox子代的父母身高达到100％? [英] How can I make Flexbox children 100% height of their parent?

问题描述

我正在尝试在Flexbox中填充Flex项目的垂直空间.

I'm trying to fill the vertical space of a flex item inside a Flexbox.

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

这是 JSFiddle

flex-2-child不能满足要求的高度，除非在以下两种情况下:

flex-2-child doesn't fill the required height except in the two cases where:

1. flex-2的高度为100％(这很奇怪，因为弹性项默认情况下为100％，而且在Chrome中是错误的)
2. flex-2-child的绝对位置也不方便

1. flex-2 has a height of 100% (which is weird because a flex item has a 100% by default + it is buggy in Chrome)
2. flex-2-child has a position absolute which is also inconvenient

当前在Chrome或Firefox中不起作用.

This doesn't work in Chrome or Firefox currently.

推荐答案

使用align-items: stretch

类似于David Storey的回答，我的解决方法是:

Use align-items: stretch

Similar to David Storey's answer, my workaround is:

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

除了align-items之外，您还可以在要拉伸的.flex-2-child项目上使用align-self.

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

这篇关于如何使Flexbox子代的父母身高达到100％?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！