Question

我正在开发一个对话框，允许用户通过网络摄像头拍摄照片和/或从计算机添加图像文件并将其上传到服务器。可以预览网络摄像头图像和灵活（flex）容器内的一些按钮。我一直在使用以下代码段：

＆＃13;

.wrapper {
  padding: 10px;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  background-color: green;
  position: absolute;
}
.content {
  width: 100%;
  background-color: red;
}
video {
  width: 100%;
  height: 100%;
}
.footer {
  width: 100%;
  background-color: orange;
}

＆＃13;

<div class="wrapper">
  <div class="content">
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" />
  </div>
  <div class="footer">footer with buttons and stuff</div>
</div>

＆＃13;

这在Chromium和Chrome浏览器中运行良好，但在Edge浏览器的Firefox中，视频元素溢出，将按钮从容器中推出，利用对话框无法使用。有没有办法让所有浏览器都能完成这项工作？

提前致谢！

防止flex-container中的HTML5视频在所有浏览器中溢出

0 个答案: