Why does flex add empty space to the height of the block if the text is stretched to the width?

Question

css

Good afternoon.
div with class text for some reason starts to stretch to the width of its sibling, not the parent when setting flex-wrap: wrap.
And yet the div.text is as tall as if the paragraphs weren't stretched to their full width, leaving white space.
Here is an example:
https://codepen.io/JimiMorrison/pen/eYOKMvv
How to fix this - it's pretty clear, I wonder why this happens.

Answer 1

The flex-wrap setting has nothing to do with it. You have flex in a column. Accordingly, the align-items property, which is stretch by default, is responsible for stretching in width. If the text does not need to be stretched according to the width of the parent, which is inherited from the widest child, then redefine align-items to flex-
start
/flex
2) Both children inherit the width from the parent with flex-direction: column and leave the default align-items.

Answer 2

It stretches to the width of its parent, which is stretched by the sibling. Set big max-width: 100%;