How to make Flexbox (flex-grow) consider content for sizing?

Question

How can we get Flexbox to stop the alignment of space in sibling elements when both elements use flex-grow: 1. This is difficult to explain in advance, so the code quickly follows the example of screenshots of the problem and the desired behavior.

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

Run code

Problem:

Note the equal space below the contents of each div.

Desired:

When there is little content in child divs, divs must be the same height:

If one of the divs has a lot of content, I would expect that a div with a lot of content will only be as high as the content (if it passes with the initial selection of bends).

How can I get this behavior? This seems to be easy with Flexbox.

Answer 1

flex-basis - , . https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

CSS flex flex, flex. , , .

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>

Answer 2

min-height .Parent ( flex-direction column), , .Parent. , ( Flexbox).

, min-height .Parent min-height on .Parent > div.

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

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