Возможно ли при ресайзе менять высоту обоих блоков с помощью CSS?

Question

[Амир]

Добрый день.
Есть два блока:

Возможно ли при помощи css сделать так, чтобы увеличивая/уменьшая высоту с помощью мыши синего блока автоматически уменьшалась/увеличивалась высота красного блока (появлялся скрол и т.п.) во враппере? Т.е. увеличиваем, например на 100 пикселей синий блок, красный блок уменьшается на 100 пикселей.
Я даже не знаю, куда копать. Игрался со свойством resize, но это не совсем что мне нужно.

<div class="wrapper">
	<div class="blue">
	</div>
	<div class="red">
	</div>
</div>

.wrapper {
	border: 1px solid #000;
	max-height: 500px;
	width: 500px;
}

.blue {
	background-color: blue;
	min-height: 250px;
	resize: vertical;
	overflow: auto;
}

.red {
	background-color: red;
	height: 250px;
	overflow: auto;
}

Comments

[WapSter]

Нет, это можно сделать на js. Я бы задал высоту через custom property и менял значение, чтобы была синхронизация

Answer 1

[Дмитрий Беляев]

Добавьте к .wrapper

display: flex;
flex-flow: column nowrap;

Answer 2

[Андрей Саныч]

так? https://jsfiddle.net/8nsr5k13/

Comments

[Амир]

нет.