Изображения переполняют .container-wrapper, несмотря на переполнение: скрыто; не работает ⇐ CSS

[Anonymous]

Я работаю над пользовательским разделом для веб-сайта, где у меня есть элемент .container-wrapper, содержащий текст и несколько изображений. Контейнер должен иметь переполнение: скрыто; чтобы предотвратить проблемы с переполнением. Однако изображения внутри .images-wrapper по-прежнему выходят за пределы контейнера.
Вот упрощенная версия моей структуры HTML и CSS:

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

[img]image1.jpg[/img]
[img]image2.jpg[/img]
[img]image3.jpg[/img]

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

.custom-section {
position: relative;
width: 100%; /* Adjust as needed */
height: 650px; /* Adjust as needed */
}

.custom-section .container-wrapper {
position: relative;
width: 100%; /* Adjust as needed */
height: 100%; /* Adjust as needed */
overflow: hidden; /* Should hide overflow */
}

.custom-section .images-wrapper {
width: 100%; /* Adjust as needed */
height: 100%; /* Adjust as needed */
position: absolute;
left: 0; /* Adjust as needed */
display: flex;
gap: 30px;
}

.custom-section .images-wrapper img {
width: 300px; /* Adjust as needed */
height: 430px; /* Adjust as needed */
}

Несмотря на переполнение настройки: скрыто; в .container-wrapper последнее изображение в .images-wrapper по-прежнему заметно переполняется. Я проверил ширину и расположение, и все кажется правильным.
Что может быть причиной этой проблемы? Как я могу гарантировать, что overflow: Hidden; эффективно скрывает переполненные изображения внутри .container-wrapper?
Вот как это выглядит сейчас:
Вот как это выглядит сейчас

Подробнее здесь: https://stackoverflow.com/questions/786 ... ot-working