Is it possible to make an element wrap around inside a Flexbox container and have the wrapping elements fill all the empty space widthwise?

Question

css

Hello.
There is the following layout

<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
  <div class="right"></div>
</div>

I'm trying to do this.

The width of the .wrap depends on the size of the browser window.
The height of .left and .right depends on the content.
But no matter how I try, nothing comes out. Please help.
Or is this impossible to implement using Flexbox?
Current sample code on JSFiddle