Как использовать единицы CQ с размером шрифта? [дубликат] ⇐ Html

[Anonymous]

У меня возникла проблема: я хочу, чтобы размер шрифта составлял 100 % ширины контейнера. Я думаю, что хочу использовать 100% cqw в качестве размера шрифта, поэтому, если размер контейнера составляет 500 пикселей, то размер шрифта должен быть 500 пикселей. Однако мне кажется, что он не работает должным образом, поскольку заголовок вырывается из контейнера. Я делаю это неправильно? Или неправильно понимаете, как работают единицы запроса контейнера?
Что у меня есть на данный момент:

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

.container {
display: flex;
}

.content-wrapper {
background-color: tomato;
width: 100%;
padding: 5rem;
color: white;
}

.content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
container: content / inline-size;
}

.img {
height: 100%;
width: 100%;
}

.img img {
width: 100%;
height: 100%;
object-fit: cover;

aspect-ratio: 4 / 3;
}

@container content (width > 100px) {

h1 {
font-size: 100cqb;
color: yellow;
margin-bottom: 0;
word-break: no-break;
outline: 1px solid pink;
}
}

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

[h4]Header[/h4]
Test



[img]https://images.unsplash.com/photo-1760804527559-92fc1678dbb8?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=736[/img]

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