DIV容器内视频高度调整 max-height样式未生效问题问询

• 百分比高度的计算规则限制：CSS中带百分比值的max-height，必须基于父元素的明确可计算高度才能生效。你代码里写的max-height: 1000%属于明显笔误，即便父元素有明确高度，10倍父元素高度的设置也不符合实际布局需求，在没有有效计算参照的场景下，浏览器会直接丢弃该样式声明
• WordPress内置样式干扰：wp-block-cover类默认携带强制的min-height规则，值为区块编辑时配置的固定像素高度，优先级高于普通行内样式，会直接撑开容器，让max-height的约束失效
• 内部元素布局影响：容器内的video元素是绝对定位的全幅撑满元素，会按照自身视频比例，随容器宽度变化动态计算实际高度，没有外部高度约束时会把容器实际高度拉到视频自身的比例高度，进一步覆盖设置的max-height规则

• 替换max-height的计算单位：不要使用无参照的百分比值，改用视口单位vh或者固定像素值，比如需要容器高度不超过视口高度的80%，直接声明max-height: 80vh，该单位不需要父元素有固定高度即可正常计算
• 覆盖内置的强制最小高度：给外层div补充行内样式min-height: unset; height: auto;，抵消wp-block-cover默认的强制最小高度约束，解除容器的固定高度限制
• 补充视频适配规则：给video元素增加行内样式width: 100%; height: 100%; object-fit: cover;，保证容器高度被限制后，视频可以按比例裁剪填充，不会出现拉伸变形
• 修正后的可直接复用的代码片段

<div style="max-width: 80%; max-height: 80vh; min-height: unset; height: auto;" class="wp-block-cover has-background-dim">
  <video class="wp-block-cover__video-background" autoplay="" muted="" loop="" playsinline="" style="object-position:50% 50%; width: 100%; height: 100%; object-fit: cover;"></video>
  <!-- 容器内部原有文本、按钮内容保持不变即可 -->
</div>

内容的提问来源于stack exchange，提问作者Simone Pardini