Upon observation, I have noticed that on iOS (or iPad, since I do not own an iPhone), when there is a multitude of inline elements in the right flex-item, the left flex-item appears to collapse:
<div style="display: flex;">
<div style="display: flex; align-items: center;">
<div style="white-space: nowrap;">
Wanna Stay Center n Don't Push Me.
</div>
</div>
<div>
<span>Push!!</span>
<span>Push!!</span>
<span>Push!!</span>
<span>Push!!</span>
<span>Push!!</span>
...
</div>
</div>
https://jsfiddle.net/jpLo0ava/2/
Further investigation revealed that this issue occurs on both Chrome and Safari. Could this be a browser bug or related to incorrect CSS usage? How can I address this situation if my intention is for the left text to remain vertically centered?