text-overflow p in flex

I realize this topic has been visited elsewhere but I ran into this for the thousandth time and decided to make a post of it in the hope of locking it in memory (if not personal reference).

The situation is a dropdown list item that is wrapping the words from one line to another, making the UI less than balanced.

codepen

<div class='parent'>
  <input type='radio' />
  <div class='flex'>
    <p>first line</p>
    <div>🥱</div>
  </div>
</div>

No problem. Let's just add the recommended ellipsizing css to the p tag

p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Oh shoot, what have I done? Perhaps the div that surrounds the text and emoji needs a width 100%.

Ok, but what happened to the 24px of padding. Why is that not respected?

The flex div stays within the padding but its textual children do not.

If you inspect the computed browser styling of the flex child you'll notice something interesting:

If you follow the rabbit hole of the w3 spec for automatic minimum size of flex items you'll observe that the default min-width: auto ends up being either the specified or the content size suggestion. This, as I understand (and please enlighten me if you understand further) amounts essentially to the minimum width of the children text nodes.

In order to overcome this large minimum width we simply add in a min-width: 0 to the flex div (Note: this permits us to remove width: 100%;).

.flex {
  display: flex;
  align-items: center;
  min-width: 0;
}