@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). Но можно ли сделать чисто на флексах?
  • Вопрос задан
  • 526 просмотров
Пригласить эксперта
Ответы на вопрос 2
vicodin
@vicodin
Фронтендер
так вы же сами задали им flex-basis, вот без него
https://codepen.io/vicodin/pen/bYyJOp
(только без !important делайте, это я чтобы в вашем ужасном коде не ковыряться добавил, ну идею должны понять)
Ответ написан
@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
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
Sveak Барнаул
от 40 000 руб.