如何使Flexbox(flex-grow)将内容考虑在内？

Question

当两个元素都在使用时,我们如何让Flexbox停止在兄弟元素中均衡空间flex-grow: 1.这很难在前面解释,因此这里的代码会快速跟随问题的示例屏幕截图和所需的行为.

.Parent {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.Parent>div {
  flex: 1;
}

.child1 {
  background-color: lightblue;
}

.child2 {
  background-color: lightgreen;
}

<div class="Parent">
  <div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus.</div>
  <div class="child2">Lorem ipsum</div>
</div>

问题:

注意每个div内容下的空格相等.

期望:

当子div中的内容很少时,div应该具有相同的高度:

当其中一个div有很多内容时,我希望内容更多的div只能与内容一样高(如果它通过了原始的flex增长分配).

我怎么能得到这种行为？似乎使用Flexbox应该很容易.

Answer 1

flex-basis是您正在寻找的财产.https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

flex-basis CSS属性指定flex基础,它是flex项目的初始主要大小.除非使用box-sizing指定,否则此属性确定内容框的大小.

默认情况下,flex会在计算时考虑元素中的内容flex-grow- 要禁用它,只需指定flex-basis: 0

.Parent {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.Parent>div {
  flex-grow: 1;
  flex-basis: 0;
}

.child1 {
  background-color: lightblue;
}

.child2 {
  background-color: lightgreen;
}

<div class="Parent">
  <div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus </div>
  <div class="child2">Lorem ipsum</div>
</div>