如何让<div/>匹配动态响应式容器尺寸且不发生溢出？

问题场景 #

需要让包含长文本的蓝色div，完全适配由短文本红色div决定的父容器宽度，避免长文本撑开容器或溢出。

解决方案 #

核心思路是锁定父容器宽度由红色div的内容决定，再强制蓝色div继承该宽度，同时按需处理文本溢出：

1. 给父容器（黄色div）添加width: fit-content，使其宽度刚好包裹红色div的短文本；
2. 给蓝色div添加width: 100%，让它填满父容器的宽度；
3. 文本处理二选一：
   • 允许自动换行（默认行为，可显式设置white-space: normal）；
   • 溢出时截断并显示省略号，需额外添加overflow: hidden; text-overflow: ellipsis; white-space: nowrap;。

修改后的代码示例 #

<div style={{
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: 'yellow',
    width: 'fit-content' // 关键：父容器宽度由红色div内容决定
}}>
    <div style={{
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'red'
    }}>
        This is a short sentence.
    </div>
    
    <div style={{
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'blue',
        width: '100%', // 关键：匹配父容器宽度
        // 可选：开启溢出截断取消以下注释
        // overflow: 'hidden',
        // textOverflow: 'ellipsis',
        // whiteSpace: 'nowrap'
    }}>
        This is a long sentence. I want it to fit into the bounds created by the short sentence in the div above.
    </div>
</div>

补充说明 #

• width: fit-content是CSS3属性，兼容现代浏览器，会自动跟随红色div的内容宽度动态调整；
• 若需兼容旧浏览器，可将父容器的width: fit-content替换为display: inline-block，实现类似效果。

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