I want flexbox sizing to factor in the width of wrapped text

When the long text wraps in a flex child, the wrapped text width is not used for its measurements. It still takes up space assuming that the text has not wrapped. This gives the long item far more space than it needs in the layout. This throws off the white space balance in the design. I've made this code pen to demonstrate and explain the issue more deeply: https://codepen.io/daniel-tonon/pen/VwLmqvb

The best work around that I can think of for this is to apply a fixed-width container around the content of each problematic flex child. The fixed width container would be different for each item and each items width would need to be carefully managed with lots of media queries. I managed to avoid this problem in the demo by not making the demo responsive.

Applying fixed widths to flexbox items goes against the spirit of what flexbox is trying to do. Also, the instant any of the content changes, all of the media query and fixed width CSS settings would need updating.