input、select、textarea真正撑满父容器需同时满足：显式设box-sizing: border-box（防padding/border溢出）、清除默认margin、确保父容器为块级或有明确宽度的flex上下文；仅width: 100%无效。
input、select、textarea 怎么真正撑满父容器宽度
直接写 width: 100% 常常无效，不是 CSS 写错了，而是被默认样式或盒模型干扰了。关键要同时处理三件事：重置 box-sizing、清除外边距、确保父容器有明确宽度上下文。
-
box-sizing: border-box必须加在所有控件上，否则padding和border会额外撑出宽度，导致溢出 - 移除浏览器 UA 样式注入的
margin（尤其margin-top和margin-bottom），Chrome/Firefox 对input默认有上下 margin - 父容器不能是
display: inline或未设width的 flex item（比如没设flex: 1的div）
推荐写法：
form .field input,
form .field select,
form .field textarea {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 8px 12px;
}
Bootstrap 5 中 form-control 类为啥不自动占满宽度
因为 .form-control 自带 width: 100%，但它依赖父容器是块级且无 flex 干扰。一旦它被塞进 .col 以外的容器（比如裸 div 或 span），或者父级用了 display: flex 但没给它分配伸缩空间，就会失效。
- 在
.row > .col结构里，.form-control能正常占满 —— 因为.col是 flex item，默认flex: 0 1 auto，但width: 100%仍起作用 - 若放在
d-flex容器中，需显式加flex-fill或w-100，否则会被压缩成内容宽度 -
select在 Safari 中可能因原生 spinner 撑宽，建议加appearance: none+ 自定义箭头
label + input 横向并排时，input 怎么占剩余宽度
常见于「标签+输入框+按钮」一行布局，目标是 label 固定宽、button 固定尺寸、input 吃掉中间所有空间。不能只靠 width: 100%，得用 Flex 配合 flex: 1。
立即学习“前端免费学习笔记（深入）”；
- 把 label、input、button 包进一个
display: flex容器（不要直接给form加） - label 设
flex: 0 0 auto，button 同理；input 设flex: 1，它会自动计算剩余空间 - 务必给 input 加
min-width: 0，防止长内容（如 URL）撑破容器（尤其在 Firefox 中）
示例结构：
<div class="d-flex align-items-center gap-2"> <label>URL:</label> <input type="text" class="flex-1 min-w-0"> <button type="submit">Go</button> </div>
为什么 w-auto 在 select 上看起来“没生效”
w-auto 不是让 select 变窄，而是让它退回到“由最长 <option> 文本决定宽度”的自然行为。如果你看到它还是占满整行，大概率是因为：父容器本身是 width: 100% 的 flex item，而 w-auto 只移除了显式 width 声明，并未限制最大宽度。
-
w-auto和w-100绝对不能共存，后者会覆盖前者 - 若想限制宽度上限，必须配合
max-width: 300px这类手动设置 - 在响应式场景下，
w-auto不会随屏幕缩小而变窄，它的宽度始终基于当前视口下渲染出的最长 option —— 这是预期行为，不是 bug
真正容易被忽略的是：Safari 对 input[type="date"] 和 input[type="number"] 的 UA 样式更激进，它们的内部控件（如日期选择器弹出箭头、数字微调按钮）可能破坏宽度计算，此时 appearance: none + 手动重绘是唯一可靠解法。
