HTML5 flexbox 中的视频高度错误

Question

在 recent website I made 上，我添加了一个视频：

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

此视频放置在 display: flex 父项中。
因为我希望它能够响应，所以我在我的 CSS:

中有这个

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

这个functions fine in Firefox.
在 Chrome, on the other hand 中，似乎发生了以下情况：

元素的宽度已按预期设置。
元素的高度是根据视频的宽度设置的如果元素没有限制其大小。

如何解决此问题，使视频尊重 <video> 元素的宽度（以响应方式），并且高度由视频的纵横比和元素的宽度决定？

.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

问题似乎出在 flex 上。

从 .container 中删除 display:flex 将修复它。

如果您需要 flex，则将 flex-direction:column 添加到 .container，因为这是您实际使用它的方式。

*{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>

HTML5 flexbox 中的视频高度错误

HTML5 video wrong height in flexbox

html

css

video

flexbox

responsive