Как ссылаться на запрос верхнего контейнера с помощью вложенных контейнеров CSS ⇐ CSS

[Anonymous]

У меня есть несколько DIV, вложенных друг в друга:

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

[code]#outer {
container: outer / size;
}
#inner {
container: inner / size;
}

Все работает как положено, пока я не попытаюсь установить ширину «контента» в процентах от «внешнего» с помощью:

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

@container outer (min-width: 100px) {
#content {
width: 40cqw;
}
}

Я ожидаю, что размер «контента» будет зависеть от «внешнего». Что происходит, так это то, что «контент» получает размер относительно «внутреннего».
Если я удаляю запрос контейнера на «внутреннем», ширина «контента» устанавливается относительно « внешний».
Как я могу установить ширину «контента» относительно ширины «внешнего»?
Изменить:
Вот простая страница, которая «не работает»:

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

#outer {
box-sizing: border-box;
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
border: 1px dotted red;
container: outer / size;
}

#inner {
box-sizing: border-box;
position: relative;
left: 10%;
top: 10%;
width: 300px;
height: 300px;
border: 1px dashed blue;
/* Uncomment the following line to see it fail(?) */
/*container: inner / size;*/
}

#content {
height: 100px;
background-color: aqua;
}

@container outer (min-width: 10px) {
#content {
width: 40cqw;
}
}

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

Если это (как кажется) правда, что «контейнерные запросы применяются [только] до ближайшего предка контейнера», то на мой вопрос нет однозначного решения. Вместо этого я попрошу их изменить дизайн страницы, чтобы контейнеры (запросы) больше не были вложенными.

Подробнее здесь: https://stackoverflow.com/questions/790 ... containers