Css 强制html5视频元素收缩以适应chrome中的容器

我需要将视频放入一个容器中，如果需要，缩小视频， 我已经设法使它在FireFox上工作，但我无法在chrome上缩小视频

.media-player video {
  cursor     : pointer;
  max-height : 100%;
  z-index    : 0;
  display    : block;
  margin     : auto;
  max-width  : 100%;
}

在FireFox中

在chrome中

请注意，视频从容器中发出吱吱嘎吱的声音，这时它应该会收缩。如何强制chrome遵守

最大高度：100%用于视频元素


*{
框大小：边框框；
保证金：0；
填充：0；
}
.视频容器{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.container{高度：300px；}
上校{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
上校中心{
对齐项目：居中；
证明内容：周围的空间；
}
.盒子{
flex：自动；
最小高度：0；
}
.盒收缩{
flex:01自动；
最小高度：0；
}
.媒体播放器{
位置：相对位置；
最小宽度：250px；
保证金：自动；
}
录像带{
光标：指针；
最大高度：100%；
z指数：0；
显示：块；
保证金：自动；
最大宽度：100%；
}
似乎主要问题在于视频包装上的
高度，即
.media player
（
.box-shrink
）
div
s

video
元素设置为
%
中的
max-
大小。因此，它需要一个参考高度/宽度来包含其
max-
属性。父级
div
没有设置高度，因此没有引用。
flex-basis
并没有影响引用的应用（它在Firefox中的作用似乎是一个bug）

从这里的参考：，对于
auto
的
flex-basis
值，它说：

在flex项上指定时，auto关键字检索
主尺寸属性作为使用的弹性基准。如果该值本身
自动，则使用的值为内容

Chrome似乎遵守了该规范。在包装
div
上没有
高度的情况下，
auto
的
flex-basis
应该采用内容的大小，这是视频的默认大小。请注意，
max-
size如果父级上没有合适的大小，则无论如何都不应该工作。对
flex-basis
使用绝对值对您的情况没有帮助，因为您已将
flex-grow
设置为0，而
flex-basis
仅表示元素的起始大小，而不是主大小

另外，请注意，您已经在包装上设置了
250px
的
minwidth
。只要视频符合该宽度（基于外部容器大小和flex thing-a-magic），就可以了。否则，也需要对此进行调查

解决方法

为包装器
div
提供尽可能小的尺寸。如果您的外部
容器
太小，请使用小尺寸的内包装

请参见此处的示例：

我已经在Chrome、FireFox和Edge上测试过它

在本例中，我将大小设置为32px，以便演示。我在容器isntead上使用了
80vh
的高度
300px
，以便您更容易调整大小并查看效果

然后，设置
flex grow
，以便包装器在容器中获得更多空间时可以增长

片段：


*{框大小：边框框；边距：0；填充：0；}
.container{高度：80vh；宽度：80vw；边距：8px；边框：2px实心#000；}
.col{display:flex；flex direction:column；justify content:space between；}
.box{flex basis:auto；}
.box收缩{
柔性：1自动；高度：32px；余量：4px；
边框：2倍实心#00f；
}
视频{
最大高度：100%；最大宽度：100%；
显示：块；边距：0px自动；边框：2px实心#f00；
}
似乎主要问题在于视频包装上的
高度，即
.media player
（
.box-shrink
）
div
s

video
元素设置为
%
中的
max-
大小。因此，它需要一个参考高度/宽度来包含其
max-
属性。父级
div
没有设置高度，因此没有引用。
flex-basis
并没有影响引用的应用（它在Firefox中的作用似乎是一个bug）

从这里的参考：，对于
auto
的
flex-basis
值，它说：

在flex项上指定时，auto关键字检索
主尺寸属性作为使用的弹性基准。如果该值本身
自动，则使用的值为内容

Chrome似乎遵守了该规范。在包装
div
上没有
高度的情况下，
auto
的
flex-basis
应该采用内容的大小，这是视频的默认大小。请注意，
max-
size如果父级上没有合适的大小，则无论如何都不应该工作。对
flex-basis
使用绝对值对您的情况没有帮助，因为您已将
flex-grow
设置为0，而
flex-basis
仅表示元素的起始大小，而不是主大小

另外，请注意，您已经在包装上设置了
250px
的
minwidth
。只要视频符合该宽度（基于外部容器大小和flex thing-a-magic），就可以了。否则，也需要对此进行调查

解决方法

为包装器
div
提供尽可能小的尺寸。如果您的外部
容器
太小，请使用小尺寸的内包装