HTML5 video wrong height in flexbox

Question

On a recent website I made, I've included a video:

<video autoplay loop muted 
  src="video.mp4">
    Your browser doesn't seem to support videos :(
</video>

This video is placed inside a display: flex parent.
Since I want it to be responsive, I then have this in my CSS:

video {
    width: 100%;
    height: auto;
}

This functions fine in Firefox.
In Chrome, on the other hand, the following seems to happen:

• The element's width is set as expected.
• The height of the element is set based on what the video's width would have been if the element hadn't limited its size.

How can I fix this so that the video respects the width of the <video> element (in a responsive manner), and the height is determined by the aspect ratio of the video and the width of the element?

.container {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  border: 2px dotted red;
}
video {
  width: 100%;
  height: auto;
  flex-shrink: 1;
  border: 2px solid blue;
}
.content {
  border: 2px solid green;
}

<div class="container">
  <video autoplay loop muted 
    src="https://birjolaxew.github.io/flippy.js/assets/video/train.mp4">
      Your browser doesn't seem to support videos :(
  </video>
  <div class="content">
    Content below video goes here.
  </div>
</div>

Answer 1

The problem seems to be due the flex.

Removing display:flex from the .container will fix it.

If you need the flex then add flex-direction:column to the .container since that is the way you actually use it.

---

*{box-sizing:border-box;}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
  width: 50%;
  border: 2px dotted red;
}
video {
  width: 100%;
  height: auto;
  flex-shrink: 1;
  border: 2px solid blue;
}
.content {
  border: 2px solid green;
}

<div class="container">
  <video autoplay loop muted 
    src="https://birjolaxew.github.io/flippy.js/assets/video/train.mp4">
      Your browser doesn't seem to support videos :(
  </video>
  <div class="content">
    Content below video goes here.
  </div>
</div>