CSS-Tailwind: невозможно переполнить длинный гибкий элемент div внутри родительского элемента div для создания эффекта с ⇐ CSS

[Anonymous]

Див(

Код: Выделить всё

scroll-content

) содержит длинный список изображений, которые я хочу скрыть под "

Код: Выделить всё

scroller

" div, так что я могу разместить кнопки со стрелками для создания эффекта слайда. Но гибкий блок расширяется более чем на 100% контейнера. Это в приложении Next JS

Код: Выделить всё

let products = [{
name:"sample 1",
imageUrl:"https://picsum.photos/536/354"
}];

const Home = async () => {
return (


{" "}

Top picks



[img]{`${products[0].imageUrl}`}

{/* Repeat the above div for other images */}

[img]{`${products[0].imageUrl}`}

{/* Add more divs as needed */}

[img]{`${products[0].imageUrl}`}

[img]{`${products[0].imageUrl}`}

[img]{`${products[0].imageUrl}`}

[img]{`${products[0].imageUrl}`}

[img]{`${products[0].imageUrl}`}

[img]{`${products[0].imageUrl}`}

[img]{`${products[0].imageUrl}`}

[img]{`${products[0].imageUrl}`}

[img]{`${products[0].imageUrl}`}

[img]{`${products[0].imageUrl}`}




Quick Links
{" "}


);
};

export default Home;

Я попробовал встроенный блок и сетку, но мне все равно не удалось добиться желаемой функциональности. Сетка перекрывает внутренние элементы div друг на друга, перенося встроенные блоки.

Подробнее здесь: https://stackoverflow.com/questions/788 ... -to-create