# Жадность при незаданной ширине flex блоков в CSS

Если у флекс элементов не задана ширина, то эта ширина сформируется по содержимому:

`<div class="parent"> <div class="child elem1">text text text</div> <div class="child elem2">text</div> </div>` `.parent { display: flex; width: 300px; height: 200px; border: 1px solid red; } .child { height: 50px; border: 1px solid green; }`

:

Если таким элементам задать жадность, то свободное пространство будет прибавляться к ширине, сформированной текстом:

`<div class="parent"> <div class="child elem1">text text text</div> <div class="child elem2">text</div> </div>` `.parent { display: flex; width: 300px; height: 200px; border: 1px solid red; } .child { height: 50px; border: 1px solid green; } .elem1 { flex-grow: 1; } .elem2 { flex-grow: 1; }`

:

← →
↑