Какое правильное заполнение 1 ячейкой flexbox`а всего свободного пространства?

Question

[VisualIdeas]

Решил что можно переходить на FlexBox повсеместно в верстке, все в принципе без проблем но вот с какой проблемой столкнулся:

<div class="flexbox">
    <div>...</div> <!-- ширина определяется контентом -->
    <div class="wide">...</div> <!-- ширина определяется оставшимся местом -->
    <div>...</div> <!-- ширина определяется контентом -->
    <div>...</div> <!-- ширина определяется контентом -->
</div>

и стили

.flexbox {
    display: flex;
}
.flexbox div {
    flex-shrink: 0;
}
.flexbox div.wide {
    flex-grow: 2;
    flex-shrink: 1;
    width: 100%;
}

Правильно ли я делаю?
Потому как иногда у меня .flexbox div.wide выпихивает остальные элементы из блока контейнера...

Answer 1

[Nikcet]

.flexbox {
   flex: 1 1 100%;
}
.flexbox .wide {
   flex: 2 1 auto;
}

Потому как иногда у меня .flexbox div.wide выпихивает остальные элементы из блока контейнера...

Правильно. У вас же flex-grow: 2.
Это значит, что он и должен их выпихивать, т.к. сам по себе в 2 раза больше остальных.

А вообще, флексы подразумевают под собой заполнение всего свободного пространства ЧЕМ-ТО.
Если вы просто хотите сделать отступ, то вам не флексы нужны.