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%，它就会自动生效。

它的作用，是行方向的 flex item （默认），align-items控制垂直行为，默认为stretch这只是按原样运作。

Stack snippet

＆＃13;

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

＆＃13;

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>

Answer 3

<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 4

删除

高度：100％；

而是执行以下示例：

<div style="display:flex; flex-direction:column">
<div style="flex-grow:1;"> Item 1 </div>
<div style="flex-grow:1;"> Item 2 </div>
</div>

上面的示例将为您显示所需的内容。

Answer 5

你走了：

＆＃13;

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

＆＃13;

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

5 个答案: