如何修复水平Flexbox画廊的异常间距及视频适配问题

问题背景 #

我制作了一个水平Flexbox画廊，代码如下：

CSS代码 #

.gallery {
  display: flex;
  overflow-x: auto;
  resize: both;
  background-color: rgb(200, 200, 200);
  padding: 10px;
  height: 200px;
}

.item {
  display: flex;
  flex: 0 0 auto;
  max-width: 100%;
}

.item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.description {
  margin-right: 30px;
  margin-left: 5px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
}

HTML代码 #

<div class="gallery">
  <div class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wald018.jpg/256px-Wald018.jpg">
    <div class="description">One</div>
  </div>
  <div class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Ung_norsk_furuskog_og_morgent%C3%A5ke.jpg/256px-Ung_norsk_furuskog_og_morgent%C3%A5ke.jpg">
    <div class="description">Two</div>
  </div>
  <div class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Swedish_Spruce_Forest.jpg/297px-Swedish_Spruce_Forest.jpg">
    <div class="description">Three</div>
  </div>
</div>

问题现象 #

• 容器尺寸充足时，布局正常，间距一致：
  
• 容器尺寸不足时，.description的外边距被挤压忽略，布局异常：
  

需求：保留.description的空间和外边距，仅让图片适配容器尺寸，且无法修改整体HTML结构。

补充问题：视频适配异常 #

现有修复方案对视频适配效果不佳，出现视频容器大于视频的情况：

修复方案 #

1. 解决间距挤压问题 #

问题根源：.item作为flex容器，在宽度受限时会默认压缩所有子元素，包括.description的外边距。只需给.description添加flex-shrink: 0，强制它不被压缩，即可保留其空间和外边距，让图片自动适配剩余宽度：

.description {
  margin-right: 30px;
  margin-left: 5px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  flex-shrink: 0; /* 新增：禁止压缩该元素 */
}

同时，为了让图片更好地适配剩余空间，可给img添加flex: 1 1 0%，确保它能填充.item的剩余宽度：

.item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  flex: 1 1 0%; /* 新增：让图片可伸缩填充剩余空间 */
}

这两个修改都是纯CSS调整，无需改动HTML结构，符合需求。

2. 解决视频适配问题 #

视频出现容器大于内容的情况，是因为视频元素没有继承图片的适配规则。只需给视频元素添加与图片一致的样式，确保它能自适应容器尺寸：

.item video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  flex: 1 1 0%; /* 和图片保持一致的伸缩规则 */
}

如果视频是包裹在容器内的，还需确保该容器也设置flex: 1 1 0%，避免容器本身占用多余空间。

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