Horizontal Collapse
CSS horizontal collapse can cause oddities in components rendered in the horizontal space.
An item get collapsed when there isn't any height. <img> causes collapse too.
Why?
The short answer for this is that elements with width but without height basically equate to no width. Once the content becomes available, height will be given and therefore it start to occupy horizontal space. Images are loaded in an asynchronous fashion thus height available and factored in later. In this example, flex is used and therefore 'align-items: stretch' is the default value. Thus giving all items in the flex the same height. However, if index 3 is loaded before index 0; height will be given to index 3 first causing the scroll left position to be in a unexpected position.
Live Demo
in 8 seconds.
in 19 seconds.