CODEWITHSUNDEEP
htmlcssflexbox
undefined
undefined

Reputation: 6844

CSS resize property both doesn't work properly with flex

I am using the CSS resize property with flexbox, and it only works vertically and not horizontally. The second problem is the vertical behavior let you resize just a little bit.

* {
	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>

What is the problem?

Upvotes: 2

Views: 1818

Answers (1)

Matt
Matt

Reputation: 492

I hope it could help:

* {
	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>

Upvotes: 2

Related Questions