如何用CSS max-width实现非必要不换行，满宽时自动换行？

要实现“容器宽度取内容不换行所需宽度与100%视宽的较小值，宽度达100%时允许文本换行”的效果，你可以通过以下CSS调整解决问题：

修正后的代码 #

.container {
    border: solid;
    width: min(max-content, 100%); /* 核心：取内容宽度和100%的较小值 */
    display: flex;
}

.left {
    flex: 3; /* 用flex比例替代固定百分比，保持3:1的宽度分配 */
    min-width: fit-content; /* 确保内容不会被过度压缩，直到容器触达100%宽度 */
}

.right { 
    border-left: solid;
    flex: 1;
    white-space: nowrap; /* 可选：让右侧文本始终不换行 */
}

<div class="container">
  <div class="left">Text that I don't want to wrap unless needed when the outer container is at width 100%</div>
  <div class="right">lorem ipsum</div>
</div>

问题原因分析 #

你之前的代码出现文本换行的核心问题在于：

• 给flex子元素设置了固定百分比width:75%和width:25%，导致flex容器计算max-content宽度时陷入循环依赖——容器宽度依赖子元素宽度，而子元素的百分比宽度又依赖容器宽度。
• 浏览器无法正确计算“内容不换行所需的容器宽度”，只能退而求其次用子元素的最小内容宽度渲染，最终导致文本被迫换行。

关键调整说明 #

1. width: min(max-content, 100%)：直接定义容器宽度为“内容不换行所需的最大宽度”和“100%视宽”中的较小值，完全匹配你的需求。
2. flex: 3/flex:1：用flex比例替代固定百分比，既保留75%/25%的宽度分配逻辑，又避免循环依赖，让容器能正确计算内容宽度。
3. min-width: fit-content：确保左侧元素在容器足够宽时，宽度能容纳所有文本不换行；当容器被限制在100%宽度时，允许元素收缩并触发文本换行。

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