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

[Anonymous]

Я хочу, чтобы размер шрифта составлял 100 % ширины контейнера. Если размер контейнера составляет 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