Как изменить контент при масштабировании в %?

Question

[Camiastrw]

Привет, у меня есть заготовка и контент изменяется при масштабировании через vw

https://jsfiddle.net/Camiastrw/bdg9rotm/

.main-content{
    max-width: calc(100vw - 30rem);
}

Как сделать все тоже самое,только через %?

Comments

[Ankhena]

Может, просто напишете flex-grow: 1?
Или перейдете на гриды и используете 1fr?

А в вашем примере вообще не понятно каким образом получились 15rem.

Answer 1

[Виталий Першин]

Чтобы контент становясь флекс элементом не вылетал за пределы блока, но тянулся на всю доступную ширину, надо помимо flex-grow: 1; добавить min-width: 0;

С вашей разметкой как-то так: