Запросы контейнера на основе высоты не работают ⇐ CSS

[Anonymous]

Я хотел бы использовать новые запросы контейнера CSS в современном браузере Safari/Chrome. (Safari 16.3, Google Chrome 113.0)
Однако запросы контейнеров на основе высоты не работают должным образом.
Ожидаемый результат: как только внешний контейнер становится синим (высота экрана 500 пикселей или ниже). Я ожидаю, что розовый квадрат (50vh контейнера 500 пикселей) станет красным.
Текущий результат: квадрат остается розовым и не становится розовым. Пример работает, если реализация является относительной по ширине.
Сделал ли я что-то не так в своей реализации или она просто не реализована в движке Webkit? Любые другие решения (без Javascript) для решения проблемы, если в конечном продукте размер контейнера будет изменяться пользователем?

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

body {
margin: 0
}

.container {
height: 50vh;
container-type: inline-size;
}

.test {
width: 250px;
height: 250px;
background-color: hotpink;
}

@container (max-height: 250px) {
.test {
background-color: red;
}
}

@media screen and (max-height: 500px) {
.container {
background: blue;
}
}

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

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