Компонент горизонтального прокрутки не работает, как и ожидалось при переполнении ⇐ Html

[Anonymous]

Я изо всех сил пытался сделать горизонтальный компонент прокрутки, который содержится в ширине экрана (что-то вроде этого: https://codeburst.io/how-to-create-hori ... 069651e9c6). Однако я не могу сделать его содержащимся на ширине экрана, и он переполняет экран. Я проверил все мои родительские элементы, установленные на ширину (100%). У меня также есть еще один элемент, который отлично работает, используя тот же подход (на той же странице). Может ли кто -нибудь помочь найти то, что я делаю не так? < /P>
Вот компонент: < /p>


{showLeftArrow && (


Scroll left

)}


{items.map((item) => (



))}


{showRightArrow && (


Scroll right

)}


< /code>
Все родительские компоненты до HTML и теги тела имеют добавленные классы ширины. Я также подумал, что, может быть, это связано с моими компонентами обучения, но проблема также, если я заполняю его пустым W-70 Div
У меня есть еще один очень похожий компонент, который не работает без проблем, что так и не переполняет ( на самом деле на той же странице, что и предыдущая): < /p>




Previous slide


{Array.from({ length: 5 }).map((_, index) => (
scrollToSlide(index)}
className={`h-2 w-2 rounded-full p-0 cursor-pointer transition-colors
${
activeIndex === index
? "bg-primary"
: "bg-muted hover:bg-muted-foreground/50"
}
focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2`}
type="button"
aria-label={`${index + 1} of 5`}
aria-disabled={false}
/>
))}

ref={slidesRef}
className="carousel__slides w-full flex overflow-auto snap-x snap-mandatory gap-5 scrollbar-none"
aria-atomic="false"
aria-live="off"
>
{Array.from({ length: 5 }).map((_, index) => (





))}



Next slide





Подробнее здесь: https://stackoverflow.com/questions/794 ... h-overflow