Как работает flex-grow?

Question

[fleshik]

Подскажите почему блоки не одинаковые https://jsfiddle.net/2anv5ck4/ как надпись Text влияет на размер блока ?

Comments

[Ankhena]

flex-grow делит свободное пространство в родителе между дочерними элементами в указанных пропорциях.

Если вам нужны блоки одинаковой ширины, так и задайте им одинаковую ширину.

[fleshik]

Ankhena, да я это понимаю я не могу понять как именно наличие текста в блоке влияет на то что
flex-grow начинает работать по другому, ведь если задать flex-grow не 1 и 1 как в примере, а например 2 и 1 то блок в котором есть текст https://jsfiddle.net/26zdgtoq/1/ будет больше чем если из него убрать текст https://jsfiddle.net/26zdgtoq/ вот и спрашиваю как наличие текста в блоке влияет на его размер, с чем это связано что
flex-grow работает по разному для одного и того же блока если он пустой и если в нем есть текст

[Ankhena]

fleshik, наличие текста в блоке изменяет свободное пространство в родителе. Соответственно, изменяется "прибавка" к блокам.
Что у вас в песочнице не смотрела, впн включать лень.

Представьте, что есть блок 500px. У него два пустых дочерних и у каждого flex-grow по 1. Блоки будут по 250px.
Если в один из них добавить слово занимающее 100px, то свободного пространства в родителе останется на 400px. Разделим его пропорционально заданным flex-grow, раз они по 1, то просто пополам.
Итого, первый блок (который с текстом) окажется 300px, второй 200.

[fleshik]

Ankhena, спасибо огромное теперь всё понятно!

Answer 1

[Nikolay Matyushkin]

В своё время мне эта статья помогла понять как работает комбинация flex-grow, flex-shrink и flex-basis.

Ознакомьтесь)