Wrapping flexbox items themselves while preserving the scaling

If I put a <video> element inside a flexbox container, I can scale down the video and center it so that it is being contained. e.g.:

<!doctype html>
<html lang="en">
  <head>
    <style>
      *{
        box-sizing: border-box;        
        min-width: 0;
        min-height: 0;
      }
      body, html{
        padding: 0;
        margin: 0;
        background: #333;
        width: 100%;
        height:  100%;
      }

      video{
        border:  10px solid magenta;
      }

      .container{
        display: flex;

        width: 100%;
        height: 100%;

        align-items: stretch;
        justify-content: center;

        border: 10px solid yellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <video controls autoplay loop>
        <source src="1.webm" type="video/webm">
      </video>
    </div>
  </body>
</html>

But if I try to wrap my video inside another div e.g.:

  <body>
    <div class="container">
      <div class="wrapper">
        <video controls autoplay loop>
          <source src="1.webm" type="video/webm">
        </video>
      </div>
    </div>
  </body>

Everything goes wrong. The .wrapper div no longer behaves like the video did and does not scale down to contain the video.

If I add css to make the .wrapper a flexbox container itself, it manages to "contain" the video BUT its width remains "fixed" at the contained video original width as you can see from the green border. the green border is as wide as my original video is (~400px) however the video has been contained although misaligned. I tried messing around with display types and min-widths but no lock in there.

<!doctype html>
<html lang="en">
  <head>
    <style>
      *{
        box-sizing: border-box;        
        min-width: 0;
        min-height: 0;
      }
      body, html{
        padding: 0;
        margin: 0;
        background: #333;
        width: 100%;
        height:  100%;
      }

      video{
        border:  10px solid magenta;
      }

      .container{
        display: flex;

        width: 100%;
        height: 100%;

        align-items: stretch;
        justify-content: center;

        border: 10px solid yellow;
      }

      .wrapper{
        display: flex;
        border: 10px solid green;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <video controls autoplay loop>
          <source src="1.webm" type="video/webm">
        </video>
      </div>
    </div>
  </body>
</html>

I also tried googling around BUT "wrapping" a flexbox item mostly finds results for flexbox wrapping which is something completely different. It seems like a really easy issue which I have become to think that it cannot be solved. Anyway, any help is appreciated. Thank you in advance!

EDIT:

In Chrome it seems to work ok :S