使用 flex-grow 或 CSS Grid 的 fr 单位可解决子元素宽度无法自适应问题。通过设置父容器为 flex 或 grid，子元素按比例分配剩余空间，实现响应式布局，避免固定宽度导致的错位与滚动。
在响应式网页设计中，子元素宽度无法自适应容器是一个常见问题。特别是在不同屏幕尺寸下，固定宽度或默认布局容易导致布局错乱或空白区域过多。解决这个问题的关键是使用现代 CSS 布局方式，如 flex-grow 或 CSS Grid 来实现自动填充和自适应。
使用 Flexbox 和 flex-grow 自动填充
Flexbox 非常适合一维布局（行或列），通过设置父容器为 flex，并调整子元素的 flex-grow 属性，可以让子元素自动扩展以填满可用空间。
示例：
.container {
display: flex;
}
.item {
flex-grow: 1; / 占据剩余空间 /
}
如果多个子元素都设置 flex-grow: 1，它们会平分剩余空间。若某个元素设置为 flex-grow: 2，它将占据两倍于其他元素的空间。这种方式在响应式下依然有效，无需媒体查询即可动态调整。
使用 CSS Grid 自动分配列宽
Grid 更适合二维布局，但也可用于一维自适应布局。通过 fr 单位（fractional unit）可以轻松让子元素按比例填充容器。
立即学习“前端免费学习笔记（深入）”；
示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* 两列，比例为 1:2 */
gap: 10px;
}
当屏幕变小时，Grid 容器会自动压缩各列，保持比例不变。也可结合 minmax() 实现更灵活的响应式网格：
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
这段代码会让每个子元素最小为 200px，多余空间平均分配，非常适合卡片布局等响应式场景。
避免固定宽度，优先使用相对单位
子元素无法自适应的根源之一是使用了 width: 300px 这类固定值。应尽量使用百分比、auto、fr 或配合 min-width / max-width 控制范围。
建议：- 用 flex-grow 替代固定宽度扩展
- 用 1fr 代替 100% 在 Grid 中更直观
- 避免 float 布局，难以响应式控制
- 测试小屏下是否出现横向滚动，及时调整
基本上就这些。使用 flex-grow 或 Grid fr 单位 能从根本上解决子元素无法自适应的问题，让布局在各种设备上自然流动。不复杂但容易忽略。
