如何让Flex容器及文本宽度随图片自动适配？

要实现容器宽度由图片尺寸决定、文本自动换行且不撑开容器的效果，可以通过以下CSS调整：

方案1：纵向排列（文本在图片下方） #

这种方式最直接，容器宽度会自动匹配图片宽度，文本自然在该宽度内换行：

<style>
.img_box {
    display: flex;
    flex-direction: column; /* 改为纵向排列 */
    /* 可选：添加内边距、边框等样式 */
    padding: 8px;
    border: 1px solid #eee;
}
.img_box img {
    width: 200px; /* 设置图片固定宽度 */
    height: auto; /* 保持图片比例 */
}
.img_box div {
    margin-top: 8px; /* 图片与文本的间距 */
}
</style>

<div class="img_box">
    <img src="img/" alt="示例图片">
    <div>Title text of some variable length. Can sometimes be wider than the image, sometimes smaller</div>
</div>

方案2：横向排列（文本在图片右侧，宽度不超过图片） #

如果需要保持图片和文本横向排列，同时文本宽度不超过图片宽度，可以这样设置：

<style>
.img_box {
    display: flex;
    width: fit-content; /* 容器宽度由内部元素（图片）决定 */
    padding: 8px;
    border: 1px solid #eee;
}
.img_box img {
    width: 200px;
    height: auto;
}
.img_box div {
    flex: 1; /* 让文本容器占据剩余空间 */
    min-width: 0; /* 解除flex元素最小宽度限制，允许文本换行 */
    word-wrap: break-word; /* 强制长文本/单词换行 */
    margin-left: 8px; /* 图片与文本的间距 */
}
</style>

<div class="img_box">
    <img src="img/" alt="示例图片">
    <div>Title text of some variable length. Can sometimes be wider than the image, sometimes smaller</div>
</div>

关键属性说明 #

• flex-direction: column：让容器内元素纵向排列，容器宽度自动匹配最宽元素（即图片）
• width: fit-content：强制容器宽度适配内部内容的宽度，这里由图片尺寸决定
• min-width: 0：默认flex元素的最小宽度等于内容宽度，设置该属性后，文本容器可被压缩至图片宽度内，实现换行
• word-wrap: break-word：确保超长单词也能换行，避免撑开容器

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