如何使Flexbox（flex-grow）考虑内容以确定大小？

Question

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

.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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过在min-height上设置.Parent（以及将flex-direction设置为column），您可以触发浏览器以直接后代填充空间.Parent。它通过平均分配所有元素之间的空间（这是Flexbox的功能）来实现。

如果您不想要这种行为，请从min-height移除.Parent并在min-height元素上设置.Parent > div。

＆＃13;

＆＃13;

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

.Parent>div {
  flex: 1;
  min-height: 100px;
}

.Parent > div:nth-child(odd) {
  background-color: lightblue;
}

.Parent > div:nth-child(even) {
  background-color: lightgreen;
}

＆＃13;

<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. 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>Lorem ipsum doler sit amet</div>
  <div>When there is little content in the children divs, the divs should be of equal height.</div>
</div>

＆＃13;

＆＃13;

＆＃13;