为何flex布局从flex-direction:column切换为row时视频消失？

问题原因 #

你使用的是经典的「百分比padding实现固定比例视频」方案，padding-bottom: 56.25%的取值是相对于父元素的宽度计算的。

• 屏幕宽度<768px时，flex容器为纵向排列，视频容器默认占满父容器100%宽度，padding可以基于宽度计算出正确的高度，视频正常展示。
• 屏幕宽度≥768px时，flex容器切换为横向排列，flex子元素默认开启flex-shrink: 1收缩规则，且你没有为视频容器指定基础宽度，视频容器本身设置了height:0，会被右侧的内容区域挤压到宽度趋近于0，padding计算出的高度也随之变成0，视频就消失了。

修复方案 #

只需要在≥768px的媒体查询中，给视频和内容区域指定flex占比即可，修改对应CSS代码如下：

@media (min-width: 768px) {
  .video-slider {
    flex-direction: row;
  }
  /* 新增以下两行样式 */
  .video-slider__video {
    flex: 1 1 50%; /* 视频区域占据一半宽度，支持自适应缩放 */
  }
  .video-slider__content {
    flex: 1 1 50%; /* 内容区域占据另一半宽度 */
  }
}

修改后两个子元素会均分flex容器的宽度，视频容器有了明确的宽度基数，padding-bottom就可以算出正确的高度，视频就能正常显示了。

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