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

[Anonymous]

Я хотел бы использовать новые запросы CSS Container в современном браузере Safari/Chrome. (Safari 16.3, Google Chrome 113.0) < /p>
Однако запросы контейнеров на основе высоты не работают, как и ожидалось. не становляться розовым. Пример работает, если реализация относительно ширины. Любые другие решения (без 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;
}
}< /code>

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