Kevin Powell - CommunityKP-C
Kevin Powell - Community•12mo ago•
16 replies
Arctomachine

Make overflow without absolute max-width

I want to make container with horizontal scroll and use flexbox for it:
.grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    list-style: none;
    overflow-x: scroll;
}

.item {
    height: 16rem;
        /* aspect ration comes from inline styles */
    position: relative;
    flex: 0 0 auto;
}


Problem: instead of overflowing .grid, it stretches nearest parent with absolute max width (pixels) to combined width of .items
Is it possible to make this scroll without giving .grid absolute width?

If not, what other solution can I use here?
Image of what I want to achieve.
image.png
Was this page helpful?