Vanhemman leveys prosentteina ja sen vaikutus CSS-flex lohkojen supistumiseen

Oletetaan, että meillä on nyt viisi flex-elementtiä, joita on asetettu riviin. Asetetaan vanhemmalle leveys prosentteina, ja kaikille lapsille asetetaan leveys 100px.

Avaa alla oleva esimerkki ja pienennä selaimen ikkunaa niin, että elementit eivät enää mahdu vanhempaan. Tätä varten ikkuna on supistettava vähemmäksi kuin 500px, koska meillä on 5 elementtiä, joista kukin on 100px. Kuten jo tiedät, tällaisessa supistustilanteessa selain pakottaa elementtien leveyden pienemmäksi kuin 100px jotta ne mahtuisivat vanhempaan. Joten, tässä on esimerkki: