16 replies

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;
}

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

KP-C

Kevin Powell - Community•14mo 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;
}

.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;
}

Make overflow without absolute max-width

Similar Threads

Make overflow without absolute max-width

Similar Threads

Similar Threads

Similar Threads