如何用Flex实现左文本右图片列：不超容器、最小宽度、保比例

想要实现左侧文本、右侧图片列的两栏布局，要求：

• 图片列高度等于（但不超过）布局整体容器高度
• 图片列仅占用显示所有图片所需的最小宽度
• 保持图片宽高比不变

布局示意图：

-------------------
| Text    | Image |
|         |-------|
|         | Image |
|         |-------|
|         | Image |
-------------------

尝试多种标记结构、flex属性、min-height、max-content等后，图片列要么溢出容器，要么无法收缩至所需最小宽度，要么图片发生变形。

简化示例代码如下：

HTML代码 #

<article>
  <main>
    <p>Hello hello hello hello</p>
  </main>

  <aside>
    <div>
      <figure>
        <img src="https://picsum.photos/800/500" alt="">
      </figure>
      <figure>
        <img src="https://picsum.photos/800/500" alt="">
      </figure>
      <figure>
        <img src="https://picsum.photos/800/500" alt="">
      </figure>
    </div>
  </aside>
</article>

CSS代码 #

/* Decoration */

html {
  font-family: Inter, sans-serif;
}

main {
  padding: 20px;
}

aside {
  background: black;
  padding-left: 10px;
}

article {
  border: 10px solid black;
  margin: 0 auto;
  padding: 0;
  /* Define the size of the overall panel */
  display: flex;
  max-width: 600px;
  max-height: 90vh;
}


/* Column of images */

aside>div {
  display: flex;
  flex-direction: column;
  margin-top: -5px;
  margin-bottom: -5px;
}


/* Each image container */


/* More reliable to have containers with half-padding, than apply a margin to bare images */

figure {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}

img {
  display: block;
  max-width: 100%;
}

通过调整Flex容器和图片相关属性，可实现符合要求的布局，核心是让图片列根据容器高度自动计算最小宽度，同时保持图片比例：

修改后的CSS代码 #

/* Decoration */

html {
  font-family: Inter, sans-serif;
}

main {
  padding: 20px;
  /* 让文本列填充容器剩余水平空间 */
  flex: 1;
}

aside {
  background: black;
  padding-left: 10px;
  /* 禁止图片列被压缩，同时收缩到内容最小宽度 */
  flex-shrink: 0;
  width: min-content;
  /* 限制图片列高度不超过父容器 */
  max-height: 100%;
  overflow: hidden;
}

article {
  border: 10px solid black;
  margin: 0 auto;
  padding: 0;
  display: flex;
  max-width: 600px;
  max-height: 90vh;
  /* 容器高度由内容或max-height决定 */
  height: fit-content;
}


/* Column of images */

aside>div {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 0;
  /* 限制图片容器列高度不超过父容器 */
  max-height: 100%;
  /* 用gap控制图片间距，替代padding更精准 */
  gap: 10px;
  padding: 5px 0;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  /* 强制保持图片原始宽高比 */
  height: auto;
  width: auto;
  /* 计算单张图片最大允许高度，确保总高度不超出容器 */
  max-height: calc((90vh - 20px - 20px) / 3 - 10px);
}

关键修改说明 #

• 文本列：给main添加flex: 1，让它自动填充容器剩余水平空间，保证图片列仅占最小必要宽度。
• 图片列容器：
  • flex-shrink: 0：防止图片列被压缩变形。
  • width: min-content：让图片列宽度等于内部图片的最小显示宽度。
  • max-height: 100% + overflow: hidden：限制图片列高度不超过父容器，超出部分自动隐藏。
• 图片设置：
  • height: auto + width: auto：强制保留图片原始宽高比，避免拉伸变形。
  • max-height：通过计算单张图片的最大允许高度（容器高度减去边框、内边距，再除以图片数量并减去间距），确保三张图片总高度不超出容器，同时自动匹配对应的宽度，实现最小水平占用。

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