百分比宽度在表单元素上常因 box-sizing: content-box、父容器 padding/border 及 fieldset 默认样式失效；需统一设 box-sizing: border-box，配合 min-width: 0、max-width: 100%、resize 控制及容器重置。
百分比宽度在表单元素上为什么经常失效
直接给 input 或 select 设 width: 100% 看似合理，但常被父容器的 padding、border 或 box-sizing 默认值破坏。浏览器默认用 content-box，此时 100% 只覆盖内容区，加上内边距和边框就会溢出容器。
实操建议：
- 所有表单控件统一加
box-sizing: border-box，确保百分比宽度包含 padding 和 border - 避免对
label或包裹div设置固定padding后再让子元素100%—— 应该把 padding 移到控件自身，或用calc(100% - 2rem)补偿 - fieldset/legend 容器默认有 margin 和 border，需重置，否则影响整体宽度计算
如何让输入框真正“自适应”而不撑破布局
单纯设 width: 100% 不等于自适应；它只是拉伸，没考虑最小可用宽度、文字截断、移动端缩放等现实约束。
实操建议：
- 配合
min-width: 0（尤其在 flex 容器中），防止 Chrome/Firefox 对表单元素施加隐式最小宽度 - 添加
max-width: 100%防止父容器超宽时失控（比如桌面端大屏下嵌套在 800px 宽卡片里） - 对
textarea必须设resize: vertical或none，否则用户拖拽会破坏响应式流 - 移动端慎用
width: 100vw—— 它会包含滚动条宽度，导致横向溢出，优先用100%+ 正确的container限制
媒体查询不是万能的，哪些表单场景该用 JS 辅助
纯 CSS 百分比 + 媒体查询能覆盖大部分情况，但遇到动态列数切换（如三栏变两栏再变一栏）、依赖输入长度自动收缩、或需要根据键盘弹出调整高度时，CSS 就力不从心。
