如何拉伸flex儿童填充容器的高度？

Question

我需要伸展黄色的孩子来填补父母的所有身高.没有设置父高度.父母的身高应该依赖于蓝色儿童文本. https://jsfiddle.net/7vaequ1c/1/

<div style='display: flex'>
  <div style='background-color: yellow;height: 100%; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

Answer 1

使用Flexbox时,主要的错误是开始全面使用height: 100%.

在许多情况下,我们习惯了这一点,但是当谈到Flexbox时,它经常会破坏它.

解决方案很简单,只需删除它height: 100%,它就会自动运行.

它的原因是,行方向的弹性项目(默认),控制垂直行为,默认情况下,这只是按原样工作.align-itemsstretch

堆栈代码段

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

Answer 2

如果我理解正确，您正在寻找align-items属性，它定义了沿交叉轴的布局，在这种情况下是垂直的。

你可以在这里找到一个很好的概述：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch; // <-- stretch vertical (default value, can be omitted here)
  align-content: center;
}

.box {
    padding: 1em;
    text-align: center;
    margin: 1em;
}

.box--yellow {
  background-color: yellow;
}

.box--blue {
  background-color: blue;
  color: white;
}

<div class="flexbox">
  <div class="box box--yellow">
    yellow
  </div>
  <div class="box box--blue">
    some<br>
    cool<br>
    text
  </div>
</div>