@opics

Как растянуть блоки на всю ширину при верстке flexbox?

Верстаю блок с тремя дочерними блоками, один из которых аналог "rowspan" на флексбоксах. Блок А имеет фиксированную ширину, как сделать чтобы блоки B и С заняли оставшееся место?

5a2903698beb4940494573.jpeg

Вот пример на codepen
Красный блок с фиксированной шириной, синий и зеленый не хотят не хотят растягиваться.

<div class="foo">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

body {
  margin: 0;
}

.foo {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background:#ccc;
  height: 250px;
}

.foo > div {
  flex: 0 0 50%;
}

.foo .a {
  background: red;
  width:100px;
  flex: 0 0 100%;
}

.b {
  background: blue;
}

.c {
  background: green;}


Пока придумал только решение дать блокам B и С свойство calc (100% - 100px). Но можно ли сделать чисто на флексах?
  • Вопрос задан
  • 181 просмотр
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы