width: fill-available 已被废弃，别再用了
这个 CSS 值在 Chrome 57+、Firefox 62+ 中已被移除或从未真正标准化，现在写 width: fill-available 或 width: -webkit-fill-available 属于“碰运气”行为——多数情况下不生效，或只在特定上下文（如 input 框内部）偶然起作用。它不是解决“填充剩余空间”的正统方案，而是历史遗留的实验性语法。
用 flexbox 的 flex: 1 实现可靠填充
这是当前最通用、兼容性最好（IE10+）、语义最清晰的方式。核心逻辑是：父容器设为 display: flex，目标子元素设 flex: 1，它就会自动撑满剩余可用空间。
常见错误现象：
– 父容器没设 display: flex，flex: 1 完全无效
– 子元素本身有固定 width 或 min-width，会阻止收缩/扩张
– 多个 flex: 1 元素并存时，它们按比例均分剩余空间（而非仅最后一个填充）
使用场景示例（水平布局中右侧盒子填满剩余宽度）：
立即学习“前端免费学习笔记（深入）”；
div.container {
display: flex;
}
div.left {
width: 120px; /* 固定宽 */
}
div.right {
flex: 1; /* 关键：填满剩余 */
}grid 布局里用 fr 单位更直观
如果父容器用 display: grid，推荐直接用 fr（fraction）单位，比 flex 更适合二维布局，且“填充剩余”意图一目了然。
参数差异：
– 1fr = 占据剩余空间的 1 份
– 2fr + 1fr = 剩余空间按 2:1 分配
– 和 flex: 2 / flex: 1 行为类似，但控制粒度更细
性能影响：
– grid 在现代浏览器中性能与 flex 相当，无需担心
– 但 IE10/11 只支持旧版 grid 语法（display: -ms-grid），需额外前缀或降级处理
简短示例（三栏布局，中间自适应）：
div.grid {
display: grid;
grid-template-columns: 80px 1fr 120px;
}注意 min-width 和 box-sizing 的干扰
即使用了 flex: 1 或 1fr，盒子仍可能“填不满”，大概率是这两个隐藏因素在作怪：
-
min-width: auto（初始值）在某些场景下会阻止收缩，尤其当内容是内联元素或未设white-space时；显式设min-width: 0可解除限制 -
box-sizing: content-box（默认）下，padding和border会撑出容器外，导致视觉上“溢出”或挤压剩余空间；统一设box-sizing: border-box是安全做法
容易踩的坑：
– 在 flex 容器里嵌套表格或图片，默认 min-width: auto 会让它们拒绝压缩，哪怕写了 flex: 1
– width: 100% 和 flex: 1 混用，后者会被前者覆盖
事情说清了就结束
