孩子的身高达到父母的

孩子的身高达到父母的

关注
发信
关注(28)粉丝(399)

我怎样才能让 Flexbox 孩子的身高达到父母的 100%?

本文介绍了我怎样才能让 Flexbox 孩子的身高达到父母的 100%?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

.container {高度:200px；宽度:500px；显示:弹性；弹性方向:行；}.flex-1 {宽度:100px；背景颜色:蓝色；}.flex-2 {位置:相对；弹性:1；背景颜色:红色；}.flex-2-child {高度:100%；宽度:100%；背景颜色:绿色；}
<div class="flex-1"></div><div class="flex-2"><div class="flex-2-child"></div>

这里是 JSFiddle

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

  1. flex-2 的高度为 100%(这很奇怪，因为 flex 项目默认为 100% + 它在 Chrome 中有问题)
  2. flex-2-child 有一个绝对位置，也不方便

目前这不适用于 Chrome 或 Firefox.

解决方案

使用align-items:stretch

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

.flex-2 {显示:弹性；对齐项目:拉伸；}

注意 height: 100% 应该从子组件中移除(见注释).

作为 align-items 的替代方案，您可以在您想要拉伸的 .flex-2-child 项目上使用 align-self.

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>

And here's the JSFiddle

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

  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

This doesn't work in Chrome or Firefox currently.

解决方案

Use align-items: stretch

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

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

Note that height: 100% should be removed from the child component (see comments).

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

这篇关于我怎样才能让 Flexbox 孩子的身高达到父母的 100%?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-22 23:39
Powered by LMLPHP ©2025 孩子的身高达到父母的 0.036917