CSS: Как заставить дочерний элемент соблюдать соотношение сторон в пределах ограничений максимальной ширины и максимальн ⇐ CSS

[Anonymous]

У меня есть родительский контейнер с ограничениями max-width и max-height, и я хочу, чтобы дочерний элемент сохранял соотношение сторон 16:9, полностью помещаясь в родительский элемент.
Текущий код

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

{/* ISSUE HERE 👇 */}

Визуализация здесь
Проблема
Дочерний элемент переполняет родительский по вертикали.
Я пробовал все комбинации h-full, max-h-full, max-w-full и w-full для дочернего элемента, но ни одного работает.
Что бы я хотел

• Дочерний элемент занимает 100 % доступной ширины (до max-w-6xl ~1152 пикселей)
• При аспекте-[16/9] его высота рассчитывается как: ширина × (9/16)
• Для ширины 1152 пикселей высота будет ~648 пикселей.
• Родительский предел ограничен максимумом 200 пикселей → вертикальное переполнение.
• Поэтому я хочу, чтобы CSS вернулся к ограничению высоты в 200 пикселей и вычислил соответствующую ширину: 200 × (16/9) = ~356px

По сути, я хочу, чтобы соотношение сторон автоматически выбирало наиболее ограничивающее ограничение (в данном случае высоту) и соответствующим образом настраивало другое измерение.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -max-width