Как сделать на флекс-бокс без calc()?

Question

[romasovest]

Как из этого:


Сделать это:


Сейчас размер пурпурного блока 3em поэтому ширина зеленого рассчитывается calc(100% - 3em), а можно как-то без calc()? flex-shrink не помогло...

Comments

[Lynn «Кофеман»]

10 лет назад это делали с помощью float, overflow и clear

[Lynn «Кофеман»]

А 15 лет назад банальными таблицами

[Lynn «Кофеман»]

А если зелёный фон не нужен, то и без overflow обычным margin

[origami1024]

Алексей Тен, а сейчас как делать? Чтобы можно было в твиттере запостить и все соглашались, что по современному?

[Lynn «Кофеман»]

Флоаты и маржины никто не объявлял устаревшими

[romasovest]

Алексей Тен, и здоровым людям ни кто не запрещает на костылях передвигаться или более точная аналогия - на инвалидной коляске, вместо сигвея.

[Lynn «Кофеман»]

Глупая аналогия.
Тут скорее велосипед или сегвей. Где-то удобнее на велосипеде, где-то на сегвее.

Answer 1

[iBird Rose]

зеленому блоку
.green {flex: 1;}

Comments

[romasovest]

Спасибо, завелось. Я так понял именно такая запись лучше чем grow и shrink потому что здесь автоматически рассчитываются все параметры и наверное basis?

[iBird Rose]

romasovest, да. flex: 1 соответствует flex: 1 1 0%

[Сергей delphinpro]

romasovest, в IE глючит короткая запись. К сведению.

[romasovest]

Сергей delphinpro, ага, спасибо переписал :*

[iBird Rose]

Сергей delphinpro, автопрефиксер пофиксит)