如何实现flex容器内响应式图片列表占满全高且侧边栏宽度自适应

需要在应用侧边面板中放置一组图片，实现两个效果：

• 图片填满侧边面板全部可用高度
• 图片保持响应式缩放特性
  目前已实现图片的响应式缩放，但存在异常：侧边面板不会根据缩放后图片的宽度自动收缩调整。调整容器高度时可观察到，图片自身宽高能正确响应缩放，但左侧面板宽度始终固定为图片原始宽度400px，无法适配图片缩放后的实际宽度。

原有实现代码 #

CSS代码 #

html, body {
    height: 100%;
    margin: 0;
}

.app .left-side {
    
}

.app .right-side {
    margin: 10px;
}

.app {
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: row;
}
.zoom__images {
    border: 1px solid black;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zoom__images > * {
    flex: 1 0 0;
    min-height: 0;
    display: flex;
    
}

.zoom__images img {
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
}

HTML代码 #

<div class="app">
  <div class="left-side">
    <div class="zoom__images">
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
      <div><img src="https://via.placeholder.com/400x400/a00/fff"></div>
    </div>
  </div>
  <div class="right-side">
  content
  </div>
</div>

Flex列布局默认按内容固有尺寸（即图片原始宽度）计算交叉轴（宽度方向）的容器尺寸，仅给图片设置max-height: 100%只能约束图片自身高度，图片等比缩放后的宽度不会反向触发父容器宽度重新计算，因此父容器会一直保留图片原始宽度的占位。

通过给容器增加宽度适配规则，让父容器宽度跟随缩放后的图片实际宽度计算，修改后的完整CSS如下：

html, body {
    height: 100%;
    margin: 0;
}

.app .left-side {
    height: 100%;
    width: fit-content;
}

.app .right-side {
    margin: 10px;
    flex: 1;
}

.app {
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: row;
    align-items: stretch;
}
.zoom__images {
    border: 1px solid black;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
}

.zoom__images > * {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    width: min-content;
}

.zoom__images img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

核心修改点：

• 给左侧面板链路的父容器（.left-side、.zoom__images）设置width: fit-content，让容器宽度不再默认拉伸，而是贴合内部内容实际宽度
• 给图片直接包裹层设置width: min-content，让容器宽度以内部图片缩放后的实际宽度为计算基准
• 给图片补充width: auto、max-width: 100%，保证图片等比缩放时宽度计算准确，不会溢出容器
• 给右侧内容区设置flex: 1，让右侧自动填充左侧面板收缩后剩余的全部宽度

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