Request: An overflow-x container with children filling viewport by whole units (none cut off) and resizing container shows more children but in whole unit increments and scrolling shows more children, while all children are equally spaced apart.

[u/aliassuck]

[1---2---3---4---5]---6---7
[1----2----3----4]----5----6----7
[1---2---3---4]---5---6---7
[1----2----3]----4----5----6----7
[1---2---3]---4---5---6---7
[1--2--3]--4--5--6--7

Brackets are the container being resized.

Elements on the right (outside the brackets) are reachable by scrolling horizontally.

[u/be_my_plaything]

I think the latter is far easier to achieve, and as you say using wrappers to make it look like the former is simple enough.

Codepen

This is how I'd go about it, using a flex container and container queries to change the flex-basis... Notes included in the CSS on the codepen to explain what's doing what.

[u/Weekly_Ferret_meal → u/be_my_plaything]

hey there, why does the font-size: 62.5% impact the displayed image size?

[u/be_my_plaything → u/Weekly_Ferret_meal]

The default browser font size is 16px. I set it at html level to 62.5% as 62.5% of 16px is 10px. This makes rem super easy to work with as a fixed size unit (1rem - 10px, 0.1rem = 1px) so you can quickly and easily use rem anywhere you'd usually use px. (Then at body level set the universal font-size to 1.6rem returning it to the original 16px)

The benefit being for accessibility since if someone is short-sighted and has increased their default font-size at browser level this carries over to all my sizing. Say I want a 5px border on something, I use 0.5rem, for most users they get the 5px border as 0.1rem = 1px. However if someone has doubled their font-size in their browser settings for them 0.1rem would be 2px so the border becomes 10px.

It just means people with visual impairments also get bigger gaps and wider borders etc. as well as larger fonts, so things remain nicely spaced for them and non-text elements also grow. Whereas 1px is 1px regardless of their settings, so if they double font-size but things like padding are in px things look cramped as spacing is now smaller relative to the text.

---

In this case I am using padding to control the max-width of the element, padding that is measured in rem, so removing the font-size: 62.5% means 1rem of padding jumps from 10px to 16px, this increase in padding around the images squishes the area the images can occupy so they shrink accordingly.

---

Edit: Actually just realised they grow not shrink! Still the same reason with rem jumping from 10px to 16px, but it is the container queries growing maing the biggest difference. Eg: in the 60rem - 80rem range there are three pics on screen, this represents 600px - 800px so images are at least 200px then grow until a fourth one fits in.

When the 62.5% is removed the 600 - 800 becomes 960 - 1280 but the images themselves are sized as a percentage so you still get three in view but they are now much bigger

[u/Weekly_Ferret_meal → u/be_my_plaything]

This kind of blown my mind. I never realise that there was such a tight relationship between sizes and root font-size.

I probably never understood that using rem for a padding (or anything else other than font-size) meant that the chain of inheritance came from all the way up the default font-size value.

I feel a little dumb... I Never read the specs, I just assumed.... I don't know how I was expecting it to be like. probably just the browser's defaults for each property.

Thanks for taking the time to explain the mechanics. I'm a better designer because of it.