flex-wrap is not wrapping boxes - css

Question

I have made the .main_area a flexbox and it has two elements in it but flex-wrap is not working.
I want that if i open it on 820px screen then it shouldautomaticaly wrap is there a solution to this
.main_area {
display: flex;
flex-wrap: wrap;
/* background-color: burlywood; */
height: 80vh;
width: 100%;
}
.picture_area {
display: flex;
align-items:baseline;
justify-content: flex-end;
/* background-color: red; */
height: 80vh;
width: 50%;
}
.picture_area img {
height: 100%;
/* width: 100%; */
float: right;
filter: grayscale(1);
}
.content_area {
/* background-color: blue; */
height: 80vh;
width: 30%;
flex-direction: column;
align-items: center;
justify-content:center;
}```
the html code is
``` <div class="main_area">
<div class="picture_area" id="picture_area">
<img src="./Cartoons_Bugs_Tunes_Looney_Bunny_Bugs_bunny_HD_Wallpapers-removebg.png" alt="">
</div>
<div class="content_area d-flex" id="content_area">
<h1 class="UI_pattern">UI Problem</h1>
<h1 class="UI_pattern">solver</h1>
<p class="UI_para">And this is why my competitors</p>
<p class="UI_para">Simply call me 'Revolver'</p>
<input type="text" class="Busi_email" placeholder="Type your business email">
<button class="UI_button">Get in touch</button>
</div>
</div>

Answer 1

Might have you forgotten to add the selector before your CSS statement?
.main-area{
display: flex;
flex-wrap: wrap;
/* background-color: burlywood; */
height: 80vh;
width: 100%;
}

Answer 2

This should work nicely for you:
.main_area {
display: flex;
flex-wrap: wrap;
/* background-color: burlywood; */
height: 80vh;
width: 100%;
}
.picture_area {
display: flex;
align-items: baseline;
justify-content: flex-end;
/* background-color: red; */
height: 80vh;
width: 50%;
}
.picture_area img {
height: 100%;
/* width: 100%; */
float: right;
filter: grayscale(1);
}
.content_area {
/* background-color: blue; */
height: 80vh;
width: 30%;
flex-direction: column;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
}
#media only screen and (max-width: 820px) {
.main_area {
display: flex;
flex-wrap: wrap;
flex-flow: column;
align-items: center;
justify-content: center;
}
}
<div class="main_area">
<div class="picture_area" id="picture_area">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
<div class="content_area d-flex" id="content_area">
<h1 class="UI_pattern">UI Problem</h1>
<h1 class="UI_pattern">solver</h1>
<p class="UI_para">And this is why my competitors</p>
<p class="UI_para">Simply call me 'Revolver'</p>
<input type="text" class="Busi_email" placeholder="Type your business email">
<button class="UI_button">Get in touch</button>
</div>
</div>