CSS resize property behavior when used with flex-wrap - css

Question

I'm currently working into a project with ReactJS and TailwindCSS where I'm making sort of a "grid" of resizable textareas and the behavior is almost how I want, except when i resize any element on the right side of the screen, which causes it to break to next line due of flex-wrap and then the resize I was doing gets recalculated taking into consideration that the textarea and the mouse positions are different than before (this is the problem).
I want to know if it's possible to make it work in the way I'm going and would be really helpfull any tip or workaround at it.
<div class="container">
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
</div>
.container{
min-height: 100vh;
background-color: lightgray;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
textarea {
resize: both;
height: 200px;
width: 250px;
max-height: 400px;
max-width: 550px;
}
Here is a Codepen with an example (written in HTML and CSS).
Here is an image that illustrates the textarea while resizing
This is what happens when the resize exceeds the flex limit and the wrap happens

Answer 1

is that what you want to do?
<div class="up_container">
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
</div>
<div class="down_container">
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
</div>
.up_container,
.down_container {
min-height: 50vh;
background-color: lightgray;
display: flex;
flex-direction:row;
gap: 10px;
}
textarea {
resize: both;
height: 200px;
width: 250px;
max-height: 400px;
max-width: 550px;
}

Answer 2

you must define a width to your container and a min-height to your textarea. I think that's what you want?
.container{
width:200vh;
min-height: 100vh;
background-color: lightgray;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
textarea {
resize: both;
min-height: 200px;
width: 250px;
max-height: 400px;
max-width: 550px;
}