я правильно понимаю, что:
line-height: 37px тоже самое, что line-height 1.12
Только разница в том, что line-height 1.12 будет адаптивно подстраиваться в зависимости от высоты контента ?
@font-face {
font-family: "pf_din_text_cond";
src: url("../pfdintextcondprobold-fot.woff2") format("woff2"),
url("../pfdintextcondprobold-fot") format("woff");
font-weight: bold;
font-style: normal;
}
wrapper (который у вас почему-то с одной p) имеет display flex,
значит ведет себя как блочный и растягивается на всю ширину родителя, т.е. body.
Но при этом имеет максимальную ширину 150px, значит, больше чем на 150 не растянется.
Его дочерний элемент .content тоже будет блочным как потомок флекс-родителя, вне зависимости от того, что это за тег.
Значит, к нему можно применять ширину.
Ширина у него 120.
Значит, никакие ограничения по ширине родительского блока на него точно не влияют (при тех свойствах, которые заданы).
Спрашивают про ширину контентной области. Тут хорошо бы уточнить, что имеется в виду, ширина блока .content или ширина непосредственно текста.
К .content применено box-sizing: border-box, значит его ширина в браузере будет такая, как указано в width = 120px.
Также у него заданы паддинги. Получаем ширину текста 120 - 15 - 25 = 80px.
Как влияет флекс на размеры дочерних элементов почитайте, если этого почему-то не рассказано в учебных курсах.