Как рассчитать ширину контентной области если wrapper display: flex;?

Question

[Twixel]

Интересует как вычислить по данному коду ширину и как влияет display: flex;.
.wraper
{
display: flex;
flex-direction: colum;
max-width: 150px;
}
.content
{
box-sizing: border-box;
width: 120px;
height: 200px;
padding: 10px 15px 20px 25px;
}
content находится внутри wrapper

Comments

[drawnofmymind]

Не совсем врубился.Ну предположу с помощью calc()

[Ankhena]

Что вам мешает посмотреть результат в браузере?
https://jsfiddle.net/9kq186ud/

[Twixel]

Ankhena, Спасибо за ответ и ссылку, но интересует как все это работает, что складывается и что принимать во внимание, что бы понять как это все посчитать. В общем, просто понять как это решается.

[Twixel]

drawnofmymind, Спасибо за ответ.

[Ankhena]

Twixel, Я так подозреваю, что это задания на дом какого-то учебного курса.

Учитывая, что это уже ваш третий такой вопрос, то просто ответ что и чему будет равно не подойдет.

Так что вам нужно открыть спецификацию и изучить как работают свойства из вопроса. Возможно, читать спецификацию будет не комфортно, тогда любое из этих свойств можно погуглить и найти удобочитаемую статью.

Есть еще вариант: комментировать свойства по одному или группами и смотреть, что изменится в браузере.

Если останутся вопросы или возникнут новые - велкам, задавайте. Или уточните что именно не понятно сейчас.

[Ankhena]

Twixel,
wrapper (который у вас почему-то с одной p) имеет display flex,
значит ведет себя как блочный и растягивается на всю ширину родителя, т.е. body.
Но при этом имеет максимальную ширину 150px, значит, больше чем на 150 не растянется.

Его дочерний элемент .content тоже будет блочным как потомок флекс-родителя, вне зависимости от того, что это за тег.
Значит, к нему можно применять ширину.
Ширина у него 120.

Значит, никакие ограничения по ширине родительского блока на него точно не влияют (при тех свойствах, которые заданы).

Спрашивают про ширину контентной области. Тут хорошо бы уточнить, что имеется в виду, ширина блока .content или ширина непосредственно текста.

К .content применено box-sizing: border-box, значит его ширина в браузере будет такая, как указано в width = 120px.
Также у него заданы паддинги. Получаем ширину текста 120 - 15 - 25 = 80px.

Как влияет флекс на размеры дочерних элементов почитайте, если этого почему-то не рассказано в учебных курсах.

[Twixel]

Ankhena, Спасибо за совет, да, это из задания, проблема в том, что там max-width: 150px и width: 120px, просчитывать по max-width или width?

[Twixel]

Ankhena, Спасибо за развернутый ответ, очень помогли с пониманием, что как и когда применяется.