如何实现最大宽度480px的自适应输入框？能否同时声明两个width属性？

首先，你尝试的双声明同width属性的写法完全达不到预期效果：这种写法是早年兼容低版本浏览器的老技巧，依靠“不支持高级特性的浏览器会直接忽略不识别的声明”的逻辑生效，但在现代浏览器下，按照标准CSS层叠规则，同优先级的样式声明，后写的会完全覆盖先写的。你写的width:480px; width:100%;最终只有width:100%会生效，前面的480px没有任何实际作用。

正规实现方案 #

这种“限制最大宽度、同时支持自适应缩放”的需求是前端通用场景，W3C专门提供了max-width属性来解决，完全不需要靠双写同属性凑效果。
你只需要把原有样式调整为：

.input-group-attach {
  width: 100%;
  max-width: 480px;
  position: relative;
  display: inline-flex;
}

这套样式的实际表现完全匹配你的需求：

• 当所在父容器、或视口整体宽度大于480px时，组件宽度会被max-width牢牢限制在480px，不会被内部的超大文件内容撑得过大
• 当视口收缩到小于480px时，组件会取width:100%的占比值，跟随视口同步缩小，不会出现固定尺寸溢出、触发横向滚动的问题

必看的踩坑补充 #

因为你用了inline-flex布局，大概率会遇到“明明设了max-width，还是被内部的超长文件名、附件预览内容撑破尺寸”的问题。这是flex布局的默认规则导致的：flex子元素默认min-width: auto，会按照自身内容的最小宽度撑开父元素，哪怕父元素设了max-width也挡不住。
对应的修复非常简单，给组件内部的直接子元素补上规则即可：

.input-group-attach > * {
  min-width: 0;
}

补上这条规则后，组件的max-width约束才能真正生效，不会被内部内容顶破尺寸。

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