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

Пусть у нас есть несколько флекс блоков. Давайте одному из этих блоков поставим `flex-grow` в значении `1`, а всем остальным элементам - некоторую ширину. В результате получится, что все блоки будут иметь фиксированную ширину, а наш избранный жадный блок будет занимать все остальное доступное пространство:

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

:

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

← →
↑