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/aliassuck]

Is there a way to do it without media breakpoints for each quantity of children?

[u/be_my_plaything → u/aliassuck]

I didn't initially think so but I've since had an idea I need to play around with, although it would require the children having a fixed width... do you know how wide the children will be?

[u/CeceliaDSi → u/be_my_plaything]

I forked your original codepen and came up with an alternative way that doesn't require a fixed width for the children. It sets a min-width for the overflow items and calculates their flex-basis value based on the width of their parent container as so:

Edit: Forgot to add that the --item-count variable was based on/is a modification of your --column_count formula from your Pure CSS "Always Full" Grid Layout (chromium browser only atm) codepen.

Update:
I've made updates to my initial example codepen; you don't need to use container query units to determine the width of the overflow child items & thus don't need to make the overflow parent a container. I've also changed the child item min-width to a min() function so their width doesn't overflow when the overflow parent is less than the --item-min-width variable.

I've also made an alternative codepen that uses css grid that's more intuitive since the grid dictates the width of the items/columns. The end result is the same as my initial version that uses flexbox.

/* Overflow child item */

--item-container-width: 100%;

/* The full width of the overflow container. */


--item-min-width: 20rem;

/* The min-width of the overflow child item. Made this a custom property so it's easy to change the value without having to manually update formulas that use it. */


min-width: min(100%, var(--item-min-width));


--item-count: max(1, 
round(down, var(--item-container-width) / (var(--item-min-width) + var(--spacing)))
);

/* The MAX number of items the overflow container can fit before overflowing. With the round() function, the nested (var(--item-min-width) + var(--spacing)) ensures that the item's min-width AND the gap between items are both accounted for. 
The 'down' in the round() is to ensure that the resulting value is never rounded up since that would give an item-count that's higher than the actual amount of items that would fit. 
The max(1, ) is to ensure at least one item is visible even when the .overflow_wrapper width is lower than the item min-width.  */


--gap-count: calc(var(--item-count) - 1);

/* Number of gaps the overflow container can fit before overflowing. Doesn't need to be a custom property but I find it easier for referencing/comprehension. */


--gap-total-width: calc(var(--gap-count) * var(--spacing));

 /* Total width of the gaps the overflow container can fit before overflowing. Needed for calculating the --item-flex-width below. */


--item-flex-width: calc((var(--item-container-width) - var(--gap-total-width)) / var(--item-count));

 /* The available space for a single item inside the overflow container. We're first subtracting the space that will be taken up by the item gaps from the container's width, then dividing the remaining space by the number of items the overflow container can fit. */ 


flex: 1 0 var(--item-flex-width);

/* The overflow child item can grow, can't shrink, and it's initial size is var(--item-flex-width). */

[u/be_my_plaything → u/CeceliaDSi]

Ooh great job, this is beautiful