Complex CSS Layout Help - Items in group within another group wrapping horizontally
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.
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!
Posted Apr 14, 2025, 9:33 PM UTC