我怎样才能让 Flexbox 孩子 100% 的高度是他们的父母？

Posted 2023-03-05

技术标签:

【中文标题】我怎样才能让 Flexbox 孩子 100% 的高度是他们的父母？【英文标题】：How can I make Flexbox children 100% height of their parent? 【发布时间】：2013-03-01 03:26:25 【问题描述】：

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

flex-2-child

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

【问题讨论】：

使用height:100%有什么问题；对于 .flex-2 ？它违背了 flex 项目的目的，即自行填充内容，它给了我 chrome 中最奇怪的错误，每当我调整窗口大小时高度就会回到零其实只有最新版的火狐才能正常运行目前，在 flexbox 中渲染百分比高度时，浏览器之间的行为存在显着差异：***.com/a/35537510/3597276 是的，Chrome 有一些问题，尤其是嵌套弹性盒。例如，我有一个嵌套的 flex 盒子，其中的孩子有 height:100%，但他们正在以自然高度渲染。奇怪的是，如果我将它们的高度更改为auto，那么它们会呈现为height:100%，就像我试图做的那样。如果它应该是这样工作的，那肯定是不直观的。 【参考方案1】：

使用`align-items: stretch`

与 David Storey 的回答类似，我的解决方法是：

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

请注意，height: 100% 应从子组件中删除（请参阅 cmets）。

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

【讨论】：

stretch: 这应该是选择的答案。如何对齐已拉伸到中间垂直对齐的 div 内的文本？是的，你应该添加删除height: 100% 这拯救了我的一天。我有一个有一些项目的弹性行。我希望这些项目从其父项中获取高度。我在这里展示了我的问题codepen.io/dshung1997/pen/LYxvXNy 如果我们在这个例子中无法控制“容器”，这会起作用吗？换句话说，我不能让“容器”使用弹性布局【参考方案2】：

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

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

也可以查看jsFiddle 的演示，虽然我只添加了 WebKit 前缀，所以在 Chrome 中打开。

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

让弹性项目的子项填充高度 100%

在孩子的父母上设置position: relative;。在孩子身上设置position: absolute;。然后您可以根据需要设置宽度/高度（在我的示例中为 100%）。

修复 Chrome 中调整大小滚动的“怪癖”

将overflow-y: auto; 放在可滚动的 div 上。可滚动的 div 必须明确指定高度。我的样本已经有 100% 的高度，但如果没有应用，您可以指定 height: 0;

有关滚动问题的更多信息，请参阅this answer。

【讨论】：

Point 1) 在 Chrome 中完美运行，Firefox 不需要绝对位置。【参考方案3】：

如果我理解正确，你想让 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 item，但它的 parent 是。

【讨论】：

我怎样才能做到这一点，只是身高 100%，每个孩子都是 50/50？请注意，如果您使用“align-items: center”，您将无法使用此修复程序，因为您的项目现在将变得等高。 @NeilMonroe 如果您只对一个孩子使用align-self: stretch，您仍然可以使用align-items: center。嗨@David，我试过你的解决方案，它适用于 flex-direction: 行布局，它似乎不适用于 flex-direction: 列布局，或者我的代码中有任何地方错误.您能帮忙检查一下为什么在这个小提琴jsfiddle.net/78o54Lmv 中，内框不会占据其父级的全部高度吗？我必须将min-height: 100vh; 添加到.flex-2 元素才能使其正常工作。感谢您的帮助！【参考方案4】：

我认为 Chrome 的行为更符合 CSS 规范（尽管它不太直观）。根据 Flexbox 规范，默认的 stretch 值为元素的“交叉尺寸属性”（height，在本例中）的 align-self 属性 changes only the used value。而且，据我了解the CSS 2.1 specification，百分比高度是根据父级height 的指定值计算的，而不是其使用值。父级的height 的指定值不受任何弹性属性的影响，仍然是auto。

设置显式的height: 100% 可以正式地计算孩子的高度百分比，就像将height: 100% 设置为html 可以计算@987654333 的百分比高度一样@ 在 CSS 2.1 中。

【讨论】：

没错！要将其付诸实践，只需将height:100% 添加到.flex-2。这是jsfiddle。 Chrome 的行为更符合 Chrome 团队对 CSS 规范的解释。虽然它可以这样解释，但有更好的解释方法，任何一种方法都不会让我们陷入这个集市、烦人和令人讨厌的行为。他们应该考虑更多。 @RickDoesburg，这是一年多以前的事了，但我相信我不得不求助于固定高度元素。我希望这些浏览器能够齐心协力。我真的开始不喜欢移动领域了。将垂直 flexbox 容器的子容器设置为 height: 100% 在 Chrome 中给我带来了非常奇怪的结果。似乎这会导致“指定高度”设置为容器的总高度，而不是元素本身的高度，因此当其他元素的大小相对于它计算时会导致不需要的滚动.【参考方案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;

【讨论】：

一个不错的 hack，但问题是：如果 child 是侧边栏并且它有背景颜色，则边距空间仍然是白色的。这个解决方案的好处在于父级的高度可以是动态的！以前的解决方案要求父级具有设定的高度。谢谢你。【参考方案6】：

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

【讨论】：

【参考方案7】：

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

【讨论】：

解释一下。【参考方案8】：

一个想法是display:flex; 和flex-direction: row; 是用.flex-1 和.flex-2 填充container div，但这并不意味着.flex-2 有一个默认的height:100%;，即使它延伸到全高。

若要让子元素 (.flex-2-child) 与 height:100%;，您需要将父元素设置为 height:100%; 或在 .flex-2 div 上使用 display:flex; 和 flex-direction: row;。

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

一个小演示，去掉了.flex-2-child的高度，在.flex-2上使用了display:flex;： http://jsfiddle.net/2ZDuE/3/

【讨论】：

【参考方案9】：

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

所以顺风的解决方案是

“弹性项目-拉伸”

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

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

【讨论】：

【参考方案10】：

.parent 
    display: flex;


.child 
    min-height: 100%;

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。【参考方案11】：

.container . . . . 对齐项目：拉伸； . . . .

【讨论】：

欢迎来到***。您需要充分解释您的答案，以及它与现有答案的不同之处。见***.com/help/how-to-answer 你的答案似乎和 B T 的一样（提前三年写的），但表达得更差。【参考方案12】：

这是我使用css+ 的解决方案。

首先，如果第一个孩子 (flex-1) 应该是 100px，它不应该是 flex。

实际上，在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>

容器 CSS：

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

显然包括css+ 0.2 core。

这里是the fiddle。

【讨论】：

以上是关于我怎样才能让 Flexbox 孩子 100% 的高度是他们的父母？的主要内容，如果未能解决你的问题，请参考以下文章

怎样才能长高让孩子快速长高的好方法

Flexbox：如何让 div 在不换行的情况下填充 100% 的容器宽度？

Flexbox 中的第一个孩子全角

怎么才能让博客图片清晰显示

React Native FlexBox：为啥添加`alignItems`会阻止孩子拥有100％的宽度？

父 flexbox 容器忽略孩子的 flexbox 最小宽度

我怎样才能让 Flexbox 孩子 100% 的高度是他们的父母？

使用align-items: stretch

“弹性项目-拉伸”

使用`align-items: stretch`