Почему соотношение сторон родителя не совпадает с h-full ребенка, но работает с абсолютным? ⇐ CSS

[Anonymous]

Я создаю адаптивный компонент экрана MacBook с использованием соотношения сторон CSS, но сталкиваюсь со странным поведением, когда соотношение сторон искажается в зависимости от того, как я позиционирую внутреннее содержимое.
Воспроизвести эту проблему оказалось сложнее, чем ожидалось, поскольку она зависит от браузера.
Версия, использующая абсолютное позиционирование, работает последовательно во всех браузерах:

• Tailwind Play #1 (с абсолютной вставкой-2)

Версия с использованием h-full корректно работает в Safari но не работает в Chrome:

• Tailwind Play #2 (с h-full)

Рабочая версия с абсолютным inset-2 (сохраняет соотношение сторон)

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

function MacBookFrame() {
return (


{/* This works aspect ratio is maintained */}





)
}

Неработающая версия с h-full (соотношение сторон искажается на маленьких экранах)

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

function MacBookFrame() {
return (


{/* This breaks 👇 aspect ratio becomes distorted */}





)
}

Проблема
С абсолютной вставкой-2: MacBook поддерживает идеальное соотношение сторон 16:9 при всех размерах экрана.
В то время как с h-full: MacBook сохраняет свою высоту, нарушение соотношения 16:9.
Чего я не понимаю
В обоих случаях содержимое остается в черных границах, поэтому внешние размеры контейнера кажутся неизменными. Почему эти два метода позиционирования по-разному влияют на вычисление соотношения сторон?
Может ли кто-нибудь объяснить поведение CSS, лежащее в основе этой разницы?
Scaffold FakeContent

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

function FakeContent() {
return (

{/* fake content */}

)
}

Среда

• Реагировать с помощью Tailwind CSS
• Современные браузеры (Chrome, Firefox, Safari)

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