如何避免Flexbox中图片撑大父容器？实现文本决定父宽度

要实现父容器宽度由child1文本决定、图片仅随父容器扩大而放大且父容器最大宽度限制为240px的效果，需要对CSS做以下调整：

• 给父容器设置width: fit-content，让其默认宽度由child1的文本内容决定；保留max-width: 240px限制最大宽度。
• 让child2占满父容器宽度，确保图片能自适应父容器的宽度变化。
• 给图片设置max-width: 100%和height: auto，避免图片撑大父容器，同时保持比例。

修改后的完整代码如下：

#parent {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 240px;
}

#child2 {
  width: 100%;
}

#child2 img {
  max-width: 100%;
  height: auto;
}

<div id="parent">
  <div id="child1">text here should decide parent width</div>
  <div id="child2"><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>

效果说明 #

1. 初始状态下，父容器宽度完全由child1的文本长度决定，图片会自动缩小到与父容器一致的宽度。
2. 当父容器所在的外部空间足够时，父容器会自动扩大至240px的上限，图片也会随之放大到对应宽度。
3. 图片不会超出父容器的宽度限制，始终保持自适应状态。

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