不使用Flexbox父容器，如何按剩余空间比例缩放元素宽度？

核心解决方案 #

无需媒体查询或Flexbox，直接通过CSS的calc()与min()函数组合即可实现需求，适配任意父容器宽度：

.container {
  width: min(calc(20% + 480px), 100%);
}

原理说明 #

我们需要的容器宽度逻辑可转化为数学公式：
当父容器宽度W ≥ 600px时，容器宽度 = 600px + 20% × (W - 600px)
对公式展开整理后得到：

600 + 0.2(W - 600) = 0.2W + 600×(1 - 0.2) = 0.2W + 480px

对应CSS的calc(20% + 480px)，其中20%是相对于父容器宽度的比例，480px是固定偏移值。

再通过min()函数确保容器宽度不会超过父容器的100%，这样当父容器宽度小于600px时，容器会自动适配父容器宽度（比如父宽500px时，calc(20% + 480px)计算结果为580px，min(580px, 100%)会取500px）。

效果验证 #

• 父容器宽度=900px时：计算得20%×900 + 480px = 660px，正好是600px + 20%×(900-600)的结果，符合需求；
• 父容器宽度=600px时：计算得20%×600 + 480px = 600px，与原设置的最大宽度一致；
• 父容器宽度<600px时：容器宽度自动适配父容器的100%，不会超出。

内容的提问来源于stack exchange，提问作者J. Reku