@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). Но можно ли сделать чисто на флексах?
  • Вопрос задан
  • 405 просмотров
Пригласить эксперта
Ответы на вопрос 2
  • @zion86
    <div class="foo">
    	<div class="a"></div>
    		<div class="bc">
    			<div class="b"></div>
    			<div class="c"></div>
    		</div>
    </div>


    body {
      margin: 0;
    }
    .foo {
    	display: flex;
    	flex-direction: row;
    	background:#ccc;
    	height: 250px;
    }
    .foo .a {
    	height: 100%;
    	width: 200px;
    	background: red;
    }
    .foo .bc {
    	display: flex;
    	flex-direction: column;
    	flex: 1;
    }
    .foo .bc .b {
    	height: 50%;
    	background: blue;
    }
    .foo .bc .c {
    	height: 50%;
    	background: green;
    }
    Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы