width: 100%对date input失效，因浏览器将其渲染为“文本框+下拉按钮”组合体并设硬编码min-width（如Chrome约130px），需同时设置min-width: 0、box-sizing: border-box及父容器明确宽度才能生效。
input type="date" 无法靠 width: 100% 直接撑满父容器，这不是 bug，是浏览器对原生控件的默认限制行为。必须显式重置最小宽度并修正盒模型才能生效。
为什么 width: 100% 对 date input 失效
Chrome、Edge、Safari 都把 input type="date" 渲染为「文本框 + 下拉按钮」组合体，内部结构不可 CSS 覆盖。浏览器还给它设了硬编码的 min-width（Chrome 约 130px），导致 width: 100% 被卡死。
- 直接写
width: 100%可能只撑开文本区，按钮溢出或错位 - Flex 布局中即使写了
flex: 1，它也拒绝收缩到小于内置最小值 - Safari 表现最顽固，
min-width: 0有时也不起作用
强制自适应的 CSS 写法（Chrome/Edge 主流有效）
核心是三要素缺一不可：重置最小宽度、修正盒模型、确保父容器有明确尺寸。
- 必须加
min-width: 0—— 解除浏览器内置限制 - 必须加
box-sizing: border-box—— 防止padding/border导致实际宽度超预期 -
width可设为100%或具体值（如200px），但父容器需是block或有明确max-width
.date-input {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 4px 8px;
}
Flex 布局下仍不收缩？补这一步
在 display: flex 容器里，仅靠 min-width: 0 不够，还需明确 flex 缩放行为：
立即学习“前端免费学习笔记（深入）”；
- 给
input加flex: 1 1 auto（或简写flex: 1） - 确认父容器没设
white-space: nowrap（会干扰内联替换元素） - 若仍异常，可临时套一层
<div style="overflow: hidden">，再把input放进去
Safari 兼容性差怎么办
macOS/iOS Safari 对 type="date" 的样式控制能力最弱，强行 hack 易破坏可访问性（如点击热区变小、屏幕阅读器识别异常）。更稳妥的路径是：
- 接受 Safari 下宽度略大，用
max-width+margin微调视觉对齐 - 改用
inputmode="numeric"+ 自定义placeholder="YYYY-MM-DD"，配合 JS 校验格式 - 真要精细控制，换轻量第三方库（如
flatpickr），完全可控且无障碍友好
原生控件的自由度本质受限，与其花半天调试 min-width: 0 在 Safari 是否生效，不如早做技术选型决策——这点在移动端表单中尤其关键。
