vertically aligned containers unable to wrap [duplicate] - html

Question

This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Closed 2 years ago.
I have two boxes I want to be displayed side-by-side. I had them displayed side-by-side fine but the left box was not vertically centered.
I followed a guide online on how to vertically align the boxes and it worked, except now the responsiveness is all messed up, if I resize the window to be very thin, the boxes dont wrap or overflow neatly.
https://jsfiddle.net/martinradio/adqLpxn5/85/
<div>
<style>
#container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
width:100%;
}
.box {
width: 50%;
box-sizing:border-box;
margin: 5px;
text-align: center;
}
</style>
<div id="container" class='w-100' >
<!-- flex container -->
<div class="box" style='background:red'>
<!-- flex item -->
<div class="form-group">
<div id='taggerErrDisplay'></div>
<input size="22" type="text" placeholder='Discogs URL' name="url" id="urlInput">
<button style="cursor: pointer;" id='urlInputButton' name="data" type="button"
onclick="submitDiscogsURL(document.getElementById('urlInput').value)">Submit</button>
</div>
</div>
<div class=" box" style='background:blue'>
<!-- flex item -->
<div id="drop-area">
<form class="my-form">
<h5>Upload multiple files with the file dialog or by dragging and dropping files here.</h5>
<br>
<input style="cursor: pointer;" type="file" id="file" multiple="multiple" />
</form>
</div>
</div>
</div>
<style>
#drop-area {
/* border: 2px dashed #ccc; */
border-radius: 20px;
width: 480px;
padding: 20px;
}
/*
#drop-area.highlight {
border-color: purple;
}
*/
p {
margin-top: 0;
}
.my-form {
margin-bottom: 10px;
}
#gallery {
margin-top: 10px;
}
#gallery img {
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
}
.button {
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ccc;
}
.button:hover {
background: #ddd;
}
#fileElem {
display: none;
}
</style>
</div>
I tried changing the flex properties but it causes both elements to remain permanently overflowed:

Answer 1

I don't know but you can try this.
Change the css as below:
#container {
display: flex;
flex-direction: row;
align-items: center;
width:100%;
}
.box {
width: 50%;
box-sizing:border-box;
margin: 5px;
text-align: center;