flex-wrap is not wrapping boxes-CodePudding

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 >
      <div  id="picture_area">
        <img src="./Cartoons_Bugs_Tunes_Looney_Bunny_Bugs_bunny_HD_Wallpapers-removebg.png" alt="">
      </div>
      <div  id="content_area">
        <h1 >UI Problem</h1>
        <h1 >solver</h1>
        <p >And this is why my competitors</p>
        <p >Simply call me 'Revolver'</p>
        <input type="text"  placeholder="Type your business email">
        <button >Get in touch</button>
      </div>
    </div>

CodePudding user response：

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%;
    }

CodePudding user response：

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 >
  <div  id="picture_area">
    <img src="https://dummyimage.com/600x400/000/fff" alt="">
  </div>
  <div  id="content_area">
    <h1 >UI Problem</h1>
    <h1 >solver</h1>
    <p >And this is why my competitors</p>
    <p >Simply call me 'Revolver'</p>
    <input type="text"  placeholder="Type your business email">
    <button >Get in touch</button>
  </div>
</div>