Задать вопрос
SuperToster
@SuperToster
html

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

Требуется: header + фиксированная колонка + резиновая колонка. Правильно ли написано: https://jsfiddle.net/15wdbeLg/ ?
  • Вопрос задан
  • 184 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
aliencash
@aliencash
Партизан 
.block2 {
    flex: 0 0 10rem;
}

.block3 {
    flex: 1 1;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@magarif
Программист
можно сделать так, чтоб править в одном месте.
:root {
  --left-side-width: 10rem;
}
.block2 {
    flex: 0 1 var(--left-side-width);
}
.block3 {
    flex: 1 1 calc(100% - var(--left-side-width));
}
Ответ написан
3 комментария
3 комментария
dom1n1k
@dom1n1k
Код приведен в принципе рабочий, но неоправденно усложненный.
Шапку удобно и надёжно выделять в отдельный контейнер.
Ниже два других блока и calc там не нужен - достаточно auto.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Разработать несистемный алерт
19 апр. 2024, в 20:11
500 руб./за проект
Расработка Парсер для сайта https://soliq.uz/activities/debtor
19 апр. 2024, в 19:51
3000 руб./за проект
Ещё заказы