Flexbox子元素异常收缩超出clamp设定最小宽度问题

• 基于row方向flex布局实现三栏结构：左右两侧为固定响应式宽度侧栏，中间为自适应宽度的视频容器
• 两侧栏均设置width: clamp(13.5rem, 18%, 20rem)实现响应式宽度，左侧天气栏宽度表现正常，右侧播放列表栏在视口宽度小于560px时会被压缩至小于13.5rem的最小宽度
• 异常与播放列表内的缩略图强相关：移除缩略图的width: 100%样式后宽度恢复正常，但缩略图会出现裁切
• 已尝试设置固定宽度、min-width、flex-shrink: 0、调整flex-basis、替换img为背景图div等方案，均未解决问题

该问题是Flex布局默认宽度计算规则和内部元素约束共同导致的：

1. Flex子项默认min-width: auto，意味着子项宽度默认不能小于内部内容的最小固有宽度。中间视频容器内部的iframe带有固定宽高属性，在未显式修改min-width的情况下会拒绝收缩，空间不足时会反向挤压其他flex子项
2. 右侧播放列表内部使用grid布局实现列表，grid子项同样默认min-width: auto，加上列表为可滚动容器未做溢出约束，会进一步干扰父容器的宽度计算
3. 仅给侧栏设置flex-shrink: 0但未修正中间容器的收缩规则，当总最小宽度超过flex容器可用宽度时，布局计算会出现异常，突破clamp设置的宽度下限

按以下步骤修改CSS即可完全解决问题：

1. 修正中间视频容器的flex属性，允许其正常收缩适配剩余空间

.video-container {
  /* 新增以下三个属性 */
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  /* 原有属性保留 */
  align-self: flex-start;
  padding: 1em;
}

2. 给侧栏显式绑定最小宽度，匹配clamp的最小值，强化宽度约束

.weather-box,
.playlist-box {
  width: clamp(13.5rem, 18%, 20rem);
  min-width: 13.5rem; /* 新增 */
}

3. 修复内部滚动列表的宽度约束，避免grid布局默认规则撑破父容器

#playlist {
  display: grid;
  width: 100%;
  min-width: 0; /* 新增 */
  padding: 1em;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

4. 给缩略图添加最大宽度限制，消除行内元素间隙影响

.vid-thumb {
  width: 100%;
  max-width: 100%; /* 新增 */
  display: block; /* 新增 */
}

修复后三栏宽度计算逻辑会完全符合预期：两侧栏始终保持clamp规则限制的宽度，中间容器自动填充剩余空间，小视口下也不会出现侧栏异常收缩的问题，缩略图可正常按容器宽度100%显示无裁切。

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