如何实现文本达最小宽度后图片缩窄以避免横向滚动条？

完全可以只用CSS实现这个效果，不需要JavaScript。只需要调整flex布局的几个关键属性，就能让文本保持最小宽度后自动挤压图片缩小，避免横向滚动条。

修改后的核心CSS逻辑： #

• 给容器.item添加max-width: 100%，确保整个布局不会超出视口宽度。
• 给图片设置flex-shrink: 1（允许图片在空间不足时缩小）、max-width: 100%（限制图片最大宽度不超过可用空间）和height: auto（保持图片宽高比）。
• 给文本区.rightText设置flex: 1 0 10em：1表示有多余空间时文本区会占满剩余宽度，0表示文本区不会被缩小（保证至少10em的宽度），10em就是文本的最小宽度阈值。

完整代码示例： #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        .item {
            display: flex;
            max-width: 100%; /* 限制容器不超出视口范围 */
        }

        img {
            flex-shrink: 1; /* 允许图片在空间不足时被压缩 */
            max-width: 100%; /* 图片最大宽度不超过容器可用空间 */
            height: auto; /* 保持图片原有宽高比例 */
        }

        .rightText {
            margin-top: 0;
            margin-left: 1em;
            flex: 1 0 10em; /* 固定最小宽度，同时允许占满剩余横向空间 */
        }
    </style>
</head>

<body>
    <div class="item">
        <img src="https://www.asahicom.jp/and/data/wp-content/uploads/2018/08/1-1.jpg"/>
        <div class="rightText">
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
        </div>
    </div>
</body>

</html>

调整后效果：当浏览器窗口足够宽时，图片显示原尺寸，文本区自动占满剩余横向空间；当窗口缩窄到文本区达到10em最小宽度后，继续缩窄窗口会触发图片自动缩小，全程不会出现横向滚动条。

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