当两个元素都在使用时，如何让 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>Notice the equal space under the content of each div.
When there is little content in the children divs, the divs should be of equal height:
When one of the divs has a lot of content, I would expect the div with more content to only be as tall as the content (if it passes the original flex grow allotment).
我怎样才能得到这种行为？看来使用 Flexbox 应该很容易。
flex-basis是您正在寻找的房产。https://developer.mozilla.org/en-US/docs/Web/CSS/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>