如何用Flexbox实现MP4视频与文本容器等比例随浏览器缩放？

你的问题出在视频元素的固有尺寸特性和固定间距设置上，以下是针对性的修改方案：

核心问题分析 #

• 视频元素默认会保留自身的最小固有尺寸，即便设置了flex:1，它也不会主动收缩，进而挤压文本空间。
• 固定的margin: 0 50px在窗口缩小时会占用过多可用空间，进一步压缩文本区域。
• 未给视频和左侧容器设置width: 100%，无法让它们完全填充flex分配的空间并同步缩放。

修改后的CSS代码 #

.content1 {
    padding: 60px 120px 100px 120px;
    display: flex;
    gap: 2rem; /* 用相对间距替代固定margin，随窗口缩放 */
    align-items: center;
    flex-wrap: wrap; /* 可选：窗口过小时自动换行，避免过度挤压 */
}

.content1 .left {
    max-width: 500px;
    flex: 1;
    width: 100%; /* 确保容器占满分配的空间 */
}

.content1 .button {
    margin-top: 12px;
}

.video {
    max-width: 500px;
    flex: 1;
    width: 100%; /* 强制视频占满flex分配的空间 */
    height: auto; /* 保持视频宽高比 */
}

修改说明 #

1. 用gap替代固定margin：父容器的gap属性会在两个子元素之间创建相对间距，避免固定值在窗口缩小时挤压文本。
2. 强制视频占满空间：width:100%让视频放弃自身固有尺寸限制，完全填充flex分配的区域，height:auto保证视频不会变形，维持原有宽高比。
3. 左侧容器设置width:100%：确保文本容器能充分利用flex分配的空间，和视频保持同步缩放比例。
4. 可选flex-wrap:wrap：当窗口宽度不足以容纳两个元素的最小宽度时，自动换行显示，提升移动端的浏览体验。

这样修改后，视频和文本区域会按照flex:1的设置平分可用空间，随浏览器窗口同步缩放，不会出现视频挤压文本的情况。

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