本文介绍一种纯 css 方案：通过 flex-direction: column 与 width: min-content 组合，使包含图片和文字的 flex 容器严格以图片宽度为基准自适应，确保文字换行而不影响整体宽度。
本文介绍一种纯 css 方案：通过 flex-direction: column 与 width: min-content 组合，使包含图片和文字的 flex 容器严格以图片宽度为基准自适应，确保文字换行而不影响整体宽度。
在响应式布局中，常需让图文组合区块（如卡片标题+缩略图）保持视觉一致性：图片尺寸固定或受限，而下方文字应自动换行、不溢出、更不反向撑大容器——这恰恰是许多开发者遇到的典型“宽度失控”问题。使用默认的 flex-direction: row 时，Flex 项目默认按内容伸展，文字长则容器变宽，违背设计预期。
核心解法：切换为垂直流 + 最小内容宽度约束
只需三步即可精准控制：
- 将 .img_box 设为垂直 Flex 布局（flex-direction: column），使图片与文字纵向堆叠；
- 设置 width: min-content，强制容器宽度收缩至其最窄子项的固有宽度（即图片设定后的渲染宽度）；
- 显式指定图片宽度（如 width: 200px 或 width: 100% 配合父容器限制），作为整个容器的宽度锚点。
此时，文字
会自然继承容器宽度，并在超出时自动换行；其自身宽度不再参与 Flex 主轴尺寸计算，彻底解除对容器宽度的影响。
✅ 完整示例代码：
<style> .img_box { display: flex; flex-direction: column; width: min-content; /* 关键：容器宽度由图片决定 */ margin: 1rem; } .img_box img { width: 200px; /* 图片宽度即容器宽度基准 */ height: auto; display: block; } .img_box div { margin: 0.5rem 0 0; text-align: justify; hyphens: auto; /* 可选：增强长单词换行可读性 */ } </style> <div class="img_box"> <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Profile image"> <div>Title text of some variable length. Can sometimes be wider than the image, sometimes smaller — and still won’t stretch the box.</div> </div>⚠️ 注意事项：