When using flexbox to lay out two elements with center aligned text (e.g a message with an icon) how can we prevent an ambiguous gap caused by the browser handling word wrapping? The issue here isn't related to the container of these two elements (icon and text in this example) but only the text element itself. The text element gets an incorrect size based on the text because the word wrapping behavious creates spaces that don't exist in the text.
It's hard to fully describe this issue without seeing it yourself, so here is a codepen - https://codepen.io/joshdavenport/pen/pooLvNg. I've added colour guides to the elements so you can see when the text containing element is bigger than it should be.
In latest Chrome sizing down the viewport from a large size, we see good behaviour when there is plenty of space. Text is tight to its element:
At multiple points, just before the text is about to break onto a new line, there is a large space not created visibly by the text itself:
And then when it wraps
That last example is what I'd like it look like the whole time. So the browser should just wrap when it needs to with the element boundary tight to the text and so on all the way through viewport sizes.
I've tried a bunch of different combinations of align-items and justify-content to no avail so it kind of seems it's the text node itself and its rendering that is causing this problem. If that is the case then I'd guess there isn't a way around this but I'm putting this out there in case somebody has come up with a genius workaround.
