CSS Horizontal Collapse

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

Toggling

in 8 seconds.

Toggling

in 19 seconds.

For reference, mirroring collapsed position and how it moves when content is available.

0
1
2
3
4
5
6
7
8
9

Horizontal collapsed, causes oddities.

0
1
2
3
4
5
6
7
8
9

With min-height, fixes it issues.

0
1
2
3
4
5
6
7
8
9