Как сделать так, чтобы родительский паддинг не скрывал элементы?

Question

Делаю страничку, на которой есть часть которую можно скроллить по оси X. Но почему-то при скролле элементы скрываются паддингом родителя.

Вот сам код:

.main {
    display: flex;
    height: 100%;
    width: 400px;
    background-color: #adadad;
    padding: 24px;
    gap: 24px;
    flex-direction: column;
}

.block {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.content {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.content__flow-x {
    flex-direction: row;
}

.scroll-x {
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar,
.scroll-y::-webkit-scrollbar {
    display: none;
}

.card {
    display: flex;
    width: 265px;
    height: 256px;
    padding: 16px;
    background-color: white;
    flex-shrink: 0;
    border-radius: 16px;
}

<main class="main scroll-y">
    <section class="block">
        <h2 class="text-h3">Результаты</h2>
        <div class="content scroll-x content__flow-x">
            <div class="card">Card 1</div>
            <div class="card">Card 2</div>
            <div class="card">Card 3</div>
            <div class="card">Card 4</div>
            <div class="card">Card 5</div>
        </div>
    </section>
</main>

Как сделать одновременно overflow: scroll и overflow:visible, чтобы элементы можно было скроллить по всей ширине экрана?

Думал убрать паддинг у main, и выставить его каждому элементу, но это усложнит разработку в будущем, потому что нужно будет не забывать выставлять паддинги элементам.

БЛОГ НА HUSL

Как сделать так, чтобы родительский паддинг не скрывал элементы?

Ответы (0 шт):