Making a div take 100% of width so the next go under (Flexbox)

So I want to make the blue div go under the green one but not under the red. Like the red being the aside, the green the header and the blue just some div.

<div class="wrap">
     <div class="one"></div>
     <div class="two"></div>
     <div class="three"></div>
</div> 

.wrap {
  display: flex;
  flex-wrap: wrap;
  height: 20rem;
}

.one {
  background-color: red;
  width: 20%;
  height: 100%;
}

.two {
  background-color: green;
  height: 3rem;
  flex: 1;
}

.three {
  width: 10rem;
  height: 10rem;
  background-color: blue;
}

I’ve tried with flex, flex-basis, flex-wrap, flex-grow, but none worked for me.

Codepen: https://codepen.io/eduardomirand/pen/dywWKGL

>Solution :

You can’t do it with flex and your markup. You should use Grid or if you want use only Flexbox do following:

<div class="wrap">
     <div class="one"></div>
     <div class="innerWrap">
       <div class="two"></div>
       <div class="three"></div>
     </div>
</div> 

and add CSS:

.innerWrap {
  display: flex;
  flex-direction: column;
}