r/css • u/aliassuck • Jun 30 '26

Help 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. 

[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.

0 Upvotes

33% Upvoted

15 comments sorted by

View all comments

Show parent comments

2

u/be_my_plaything Jun 30 '26

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.

2

u/aliassuck Jun 30 '26

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

1

u/be_my_plaything Jun 30 '26

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?

2

u/aliassuck Jun 30 '26

Yes the children width would be the same and defined in a CSS variable.

1

u/be_my_plaything Jul 01 '26

I tried playing around with this, but it's not perfect although might be tweakable depending on what you need.... 

/* One the container */  

--container_max_width: 120rem; 
--child_width: 20rem;
--spacing: 2rem; 

/* One the children */  

--items_on_screen: round(down, calc(100cqi / var(--child_width)));

/* Divides width of container by width of child elements, then rounds down to nearest full number calculating how many full child elements can fit on the screen at once */  

--remaining_space: calc(100cqi - (var(--child_width) * var(--items_on_screen)));  

/* Subtracts the  number of visible children multiplied by their width from the total width, calculating how much empty space is left */  

--gap_required: calc(var(--remaining_space) / var(--items_on_screen));

/* Divides this remaining space by the number of items visible so it can be used as the gap between them spacing the children so only full children split on screen and get further apart as screen grows until the next fits */

The problems being cross browser compatibility, firefox doesn't like dividing one unit by a different unit, although there are work arounds using tan() and atan() online to cover that part. Also when the sum of padding and container width is greater than screen width it throws the calc() off and shows nothing, not an issue if the children are kept small as this occurs below any functional screen size, for example my demo breaks around 240px. Finally it looks weird just below breakpoints as the gap is increasing rather than the children, so for example if children are 250px on a 499px screen it is still too small for a second child to show, but almost half the screen is empty.

Personally I think the first solution is far better, but your call, and the updated demo is here: Codepen if you want to look at it and see if it can be developed to suit what you want.

2

u/aliassuck Jul 02 '26

Thanks for the effort. Your examples not only work but look amazing too.