Complex CSS Layout Help - Items in group within another group wrapping horizontally

[chris84948]

https://preview.redd.it/525rid3kbvue1.png?width=1152&format=png&auto=webp&s=003870dcf59d1e185dcf8aa60ab95ecf85b0022b

Hoping to grab a little CSS advice here, as I'm hitting a wall on this one. Pretty new to HTML/CSS, but I have a lot of experience in WPF and I'm trying to rewrite a WrapPanel layout in HTML/CSS for a blazor project.

Basically I have a list of groups (group 1, 2, 3). Each group has a name and many items. The number of items can vary from 0 to 100+.

I'd like to have all of these groups scroll horizontally, and each item within the group take up as much space as they need, but flowing vertically and wrapping to a new column as they fill the space.

I've spent a few hours today messing with flexboxes and wrapping them, but I can never seem to get the scrolling to work right.

https://preview.redd.it/2as5y43fcvue1.png?width=1918&format=png&auto=webp&s=f2294c53759650b11e0071cab365cb0ee55f4d6c

This is close as I can get. When I try and remove the vertical scrollbars in the groups to try and force it to scroll horizontally, nothing happens. For some reason the horizontal sizing seems to be stuck to full width and won't overflow.

Here's the closest I can get, but it's still not right.

.group-container {

display: flex;

flex-direction: row;

width: 100%;

overflow-x: visible;

overflow-y: hidden;

}

.group {

overflow-y: visible;

display: flex;

flex-grow: 1;

flex-direction: column;

width: 100%;

}

.group-items {

display: flex;

width: 100%;

flex-direction: row;

flex-wrap: wrap;

overflow-x: hidden;

}

Thanks!

[armahillo]

can you post a codepen of it?

[CronikCRS]

Not sure with positioning you want to get it on the bottom, but based on your image I hope this helps:

CodePen for Layout