CSS свойство resize не работает должным образом с flex

Question

Я использую свойство CSS resize с flexbox, и оно работает только вертикально, а не горизонтально.Вторая проблема - это вертикальное поведение, позволяющее немного изменить размер.

* {
	box-sizing: border-box;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}


.box {
	flex: 1 1 50%;
	border: 1px solid red;
	overflow: auto;
	padding: 4em;
	resize: both;
}

<section class="flex">
	<div class="box">1</div>
	<div class="box">2</div>
	<div class="box">3</div>
	<div class="box">4</div>
</section>

В чем проблема?

Answer 1

Я надеюсь, что это может помочь:

* {
	box-sizing: border-box;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}


.box {
	width: 50%;
	border: 1px solid red;
	overflow: auto;
	height: 100px;
	resize: both;
}

<section class="flex">
	<div class="box">1</div>
	<div class="box">2</div>
	<div class="box">3</div>
	<div class="box">4</div>
</section>