Flex calc, можно ли так?

Question

[SuperToster]

Требуется: header + фиксированная колонка + резиновая колонка. Правильно ли написано: https://jsfiddle.net/15wdbeLg/ ?

Comments

[DanKud]

А calc зачем? Там и без него этот блок будет резиновый. Но можно и calc использовать если хотите :)

Answer 1

[Андрей Федоров]

.block2 {
    flex: 0 0 10rem;
}

.block3 {
    flex: 1 1;
}

Answer 2

[Марат Гарифуллин]

можно сделать так, чтоб править в одном месте.

:root {
  --left-side-width: 10rem;
}
.block2 {
    flex: 0 1 var(--left-side-width);
}
.block3 {
    flex: 1 1 calc(100% - var(--left-side-width));
}

Comments

[SuperToster]

Марат Гарифуллин,
У переменных поддержки маловато. Рано их юзать.

[Никита Юдин]

SuperToster, можно использовать переменные в препроцессорах Sass/Less

[Андрей Федоров]

SuperToster, про фолбэки не забываем...

:root {
  --left-side-width: 10rem;
}
.block2 {
    flex: 0 1 10em;
    flex: 0 1 var(--left-side-width);
}
.block3 {
    flex: 1 1 calc(100% - 10em);
    flex: 1 1 calc(100% - var(--left-side-width));
}

Answer 3

[dom1n1k]

Код приведен в принципе рабочий, но неоправденно усложненный.
Шапку удобно и надёжно выделять в отдельный контейнер.
Ниже два других блока и calc там не нужен - достаточно auto.

Comments

[SuperToster]

dom1n1k,
Нужно именно так, чтобы использовать order. Вопрос был не про "рабочесть", а можно ли так написать? Корректно?