“弹性项目-拉伸”

Question

我试图填充flexbox内的flex项目的垂直空间。

＆＃13;

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

＆＃13;

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

＆＃13;

这里是JSFiddle

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

flex-2的高度为100％（这很奇怪，因为灵活项目默认情况下为100％+ Chrome中存在错误）
flex-2-child有一个绝对的位置也很不方便

目前无法在Chrome或Firefox中使用。

Answer 1

我已经回答了类似的问题here。

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

另请参阅此jsFiddle进行演示，但我只在Chrome中添加了webkit前缀。

你基本上有2个问题，我将单独处理。

让灵活项目的孩子填充高度100％
- 在孩子的父母身上设置position: relative;。
- 在孩子身上设置position: absolute;。
- 然后，您可以根据需要设置宽度/高度（样本中为100％）。
修复Chrome中的调整大小滚动“quirk”
- 将overflow-y: auto;放在可滚动的div上。
- 可滚动的div必须具有指定的显式高度。我的样本已经有100％的高度，但如果没有应用，您可以指定height: 0;

有关滚动问题的详细信息，请参阅此answer。

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

我认为Chrome的行为与CSS规范更为一致（尽管它不太直观）。根据Flexbox规范，元素的“交叉大小属性”（在这种情况下为stretch）的align-self属性changes only the used value的默认height值。而且，据我了解the CSS2.1 spec，百分比高度是根据父级height的指定的值计算的，而不是其使用的值。父级height的指定值不受任何弹性属性的影响，仍然是auto。

设置明确的height: 100%使正式可以计算孩子的百分比高度，就像将height: 100%设置为html就可以计算出来CSS2.1中body的百分比高度。

Answer 4

我自己找到了解决方案，假设您有以下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 5

一个想法是，display:flex; flex-direction: row;填充container div .flex-1和.flex-2，但这并不意味着{{1}默认.flex-2有一个默认height:100%;即使它已扩展到完整高度并且有一个带有.flex-2-child的子元素（height:100%;），您需要将父元素设置为height:100%;或者在display:flex; div上使用flex-direction: row;和.flex-2。

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

一个小型演示，从.flex-2-child移除了高度并在display:flex;上使用了.flex-2： http://jsfiddle.net/2ZDuE/3/

Answer 6

<强> HTML

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

<强> CSS

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

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

Answer 7

有趣的事实：height-100% 适用于最新的 chrome；但不是在 safari 中；

顺风的解决方案是

“弹性项目-拉伸”

https://tailwindcss.com/docs/align-items

并递归地应用于孩子的孩子的孩子......

Answer 8

这也可以在我们要拉伸的元素上使用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 9

.container { 。。。。 align-items：拉伸；。。。。 }

Answer 10

这是我使用css+

的解决方案

首先，如果第一个孩子（flex-1）应该是100px，则不应该弯曲。事实上，在css+中，您可以设置灵活和/或静态元素（列或行），您的示例就变得如此简单：

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

container css：

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

显然包括css+ 0.2 core

听取fiddle

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

10 个答案:

“弹性项目-拉伸”