Гибкие элементы с гибким базисом выходят за пределы контейнера ⇐ CSS

[Anonymous]

У меня есть контейнер с переменным количеством видео, и я хочу, чтобы эти видео располагались по центру контейнера с максимум 3 видео в строке, до 9 видео (я разделил их на страницы с помощью JavaScript, но проблема в том, что на страницу) с сохранением соотношения сторон 16/9.
Контейнер, в котором находятся видео, не имеет полной высоты экрана. Моя проблема в том, что видео превышают высоту контейнера. Есть ли способ сохранить видео в контейнере, сохраняя при этом соотношение сторон и сохраняя по 3 в строке без установки высоты? Ширина видео не имеет значения, если все они помещаются в контейнер.
Ниже я прикрепил минимальный пример, чтобы проиллюстрировать проблему. Я рекомендую просмотреть его в полноэкранном режиме, чтобы легче увидеть проблему.

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

html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.page {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
align-content: center;
width: 100%;
height: 100%;
background-color: #f0f0f0;
}

.container {
height: calc(100% - 12rem);
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-wrap: wrap;
row-gap: 12px;
column-gap: 12px;
width: 100%;
background-color: #444;
}

.video {
position: relative;
aspect-ratio: 16 / 9;
flex-basis: 25%;
background-color: gray;
}

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

Подробнее здесь: https://stackoverflow.com/questions/792 ... -container