calc()中直接减padding失效，因%基于父宽而padding属自身；须设box-sizing:border-box，显式减已知padding值，并注意flex-shrink、border/outline及min-width配合。
calc() 里直接减 padding 会失效
很多人写 width: calc(100% - 20px) 想扣掉左右 padding，结果发现搜索框还是撑出容器——因为 % 是相对于父容器宽度计算的，而 padding 是自身内边距，两者不在同一计算上下文中；calc() 不会自动感知元素自身的 padding 值。
真正要扣的是「可用内容区宽度」，得靠 box-sizing: border-box 配合显式减去已知值：
-
box-sizing: border-box必须设，否则width只控制 content 区，加了padding后总宽必然超限 - 如果
padding-left和padding-right固定（比如都是12px），就老老实实写calc(100% - 24px) - 如果用
rem或em设 padding，calc 里也得用相同单位，不能混用px和rem
搜索框在 flex 容器中缩不进去？检查 flex-shrink
把搜索框放进 display: flex 的导航栏或工具栏时，即使写了 width: calc(100% - 48px)，它仍可能占满剩余空间——这是 flex-shrink: 1 默认行为在起作用，它优先压缩内容区而非尊重 width。
解决办法很简单，但容易被忽略：
- 给搜索框显式加
flex-shrink: 0，让它不参与收缩 - 或者改用
min-width: 0+width: calc(...)组合，触发 flex item 的最小尺寸重置逻辑 - 别依赖
flex: 1，它等价于flex: 1 1 0%，第二个1就是flex-shrink: 1
响应式下 calc() 配合 min-width 才真可靠
单纯靠 width: calc(100% - 48px) 在小屏上可能让搜索框窄到无法输入——比如只剩 60px 宽。这时候 min-width 不是锦上添花，而是必须项。
典型搭配写法：
input[type="search"] {
box-sizing: border-box;
width: calc(100% - 48px);
min-width: 200px;
padding: 8px 12px;
}
注意点：
-
min-width值建议用固定像素（如200px），避免嵌套 calc 导致计算不可控 - 如果父容器本身有响应式断点（比如
@media (max-width: 768px)），可在断点内单独调小min-width，而不是试图用媒体查询重写整个 calc 表达式 - 不要对
min-width用百分比，它在 flex 或 grid 中行为不稳定
border 和 outline 也会悄悄吃掉可用宽度
写完 calc(100% - 48px) 还是溢出？打开开发者工具看 computed styles，大概率是 border 或 outline 没算进去。它们不包含在 box-sizing: border-box 的 width 范围内，但会真实增加元素总宽。
稳妥做法：
- 统一用
border: none或明确写出border-width，并在 calc 中加上（比如左右各1px就 +2px） - 用
outline替代border做聚焦样式，因为outline不影响布局尺寸 - 如果必须保留边框且要精确控制，改用
background-clip: padding-box配合内阴影模拟边框效果
实际项目里最常翻车的，不是 calc 写错，而是忘了 box-sizing、漏了 flex-shrink、或者把 border 当空气。这几个点卡住，再漂亮的表达式也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
