Every time I re-encounter this, I end up re-learning that min-width on flex items defaults to 'auto' and min-width: 0; is the secret sauce.

e.g. I recently made a component representing an attached file, where the flex items in its layout were:

    [icon] [filename] [button]

To get long filenames to not force their container to the full length of the string, so they could be truncated by text-overflow: ellipsis, I needed to put min-width: 0; on the flex item containing the filename.

It’s very easy to reproduce this bug, even if you don’t go quickly. Basically, if your tap becomes a “swipe” that leaves the button area, then a previously registered “tap” that’s already shown up in the field will actually “unregister” and disappear from the field. Try it yourself: tap down on a button, watch the dot appear, then without lifting your finger, swipe out of the button, and watch it disappear. This happens a lot when tapping quickly since you are tapping and beginning to move your finger in the direction of the next button. You have to train yourself to make only up and down motions to be able to go quickly. It is indeed very annoying. The way these buttons should work is like telephone buttons (registering on the “mousedown”, not “mouseup”), and not like OK buttons (that register on the “mouseup”), but instead they chose a weird combination of both.