如何让flexbox儿童100%的父母身高？

Question

我正在尝试填充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>

这是JSFiddle

flex-2-child 没有填写所需的高度,除非在以下两种情况下:

1. flex-2 高度为100%(这很奇怪,因为弹性项目默认为100%+ Chrome中存在错误)
2. flex-2-child 有一个绝对的位置也很不方便

这在目前的Chrome或Firefox中不起作用.

Answer 1

我在这里回答了类似的问题.

我知道你已经说过position: absolute;不方便但是有效.有关修复调整大小问题的详细信息,请参阅下文.

另请参阅这个jsFiddle进行演示,虽然我只在Chrome中添加了webkit前缀.

你基本上有2个问题,我将分别处理.

1. 让灵活项目的孩子填充高度100%
   • 设置position: relative;在孩子的父母身上.
   • 坐落position: absolute;于孩子.
   • 然后,您可以根据需要设置宽度/高度(我的样本中为100%).
2. 在Chrome中修复调整大小滚动"quirk"
   • 穿上overflow-y: auto;可滚动的div.
   • 可滚动div必须具有指定的显式高度.我的样本已经有100%的高度,但如果没有应用,你可以指定height: 0;

有关滚动问题的详细信息,请参阅此答案.

Answer 2

如果我理解正确,你想要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项目,但它的父项是.

Answer 3

与David Storey的答案类似,我的工作是:

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

或者align-items: stretch,你可以align-items只使用align-self你想拉伸的项目.

Answer 4

我认为Chrome的行为与CSS规范更加一致(尽管它不太直观).根据Flexbox规范,属性的默认stretch值仅更改元素的"交叉大小属性"(在本例中)的使用值.而且,据我了解CSS2.1规范,百分比高度是根据父项的指定值计算的,而不是其使用的值.父级的指定值不受任何弹性属性的影响,但仍然存在.align-selfheightheightheightauto

设置显式height: 100%使得正式可以计算子项的百分比高度,就像设置height: 100%为html可以计算bodyCSS2.1中的百分比高度一样.

Answer 5

我自己找到了解决方案,假设您有以下CSS:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

在这种情况下,设置高度100%将不起作用,所以我所做的是将margin-bottom规则设置为auto,如:

.child {
  margin-bottom: auto;
}

并且孩子将与父母的最顶层对齐,align-self如果您愿意,您也可以使用该规则.

.child {
  align-self: flex-start;
}

Answer 6

另一种方法（其他选项不适合我的情况，因为我需要一个更通用的解决方案，我真的想position: absolute尽可能避免使用，并且display: flex由于align-items: stretch其他syling而在我的情况下无法使用）：

1. 有一个父母与display: flex
2. 也给你的元素显示flex，align-self: stretch并且margin-top: 0+margin-bottom: 0

最小可重现示例：

.parrent {
  display: flex;
}
.full-height-just-with-bg-collor {
  width: 100%;
  display: flex;
  align-self: stretch;
  // this can be just 0 or you can set just the top and bottom values
  margin: 0 2px;
  background-color: green;
}

<div>
  <div class="parrent">
    <div class="full-height-just-with-bg-collor"></div> 
    textForHeight
  </div>
</div>

Answer 7

这也可以align-self: stretch;在我们想要拉伸的元素上解决。

有时需要在 Flexbox 设置中只拉伸一项。

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

Answer 8

.parent {
    display: flex;
}

.child {
    min-height: 100%;
}

Answer 9

一个想法是display:flex;with用andflex-direction: row;填充containerdiv ，但这并不意味着它有默认值，即使它扩展到全高。.flex-1.flex-2.flex-2height:100%;

要拥有一个.flex-2-child带有 的子元素 ( ) height:100%;，您还需要将父元素设置为height:100%;或在div 上使用display:flex;with 。flex-direction: row;.flex-2

据我所知，display:flex不会将所有子元素的高度扩展到 100%。

一个小演示，删除了高度.flex-2-child并用于display:flex;：.flex-2http ://jsfiddle.net/2ZDuE/3/

Answer 10

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height: 100%;
    background-color: green;
}

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

http://jsfiddle.net/2ZDuE/750/

Answer 11

.parent {
    display: flex;
    align-items: center;
}

.child {
    align-self: stretch;
}

根据之前的答案，该解决方案适用于全高度柔性元素。