使用box-sizing: border-box可避免元素溢出，结合overflow控制溢出行为，在flex布局中设置min-width: 0和flex-shrink确保子元素可压缩，从而防止布局错位。
当内容超出容器时出现滚动或布局错位，通常和盒模型的尺寸计算方式有关。通过合理使用CSS盒模型属性，可以有效控制元素的实际占用空间，避免意外溢出。
理解标准盒模型与border-box
默认情况下，CSS使用的是content-box模型：width和height只包含内容区域，padding和border会额外增加元素总尺寸。这容易导致设置100%宽度的盒子加上padding后超出父容器。
将盒模型改为border-box后，width和height包含了content、padding和border，更便于控制布局：
box-sizing: border-box;这样即使添加内边距或边框，元素也不会轻易溢出父级容器。
立即学习“前端免费学习笔记（深入）”；
控制溢出行为：overflow属性
当内容确实超出时，可以通过overflow来管理显示方式：
- overflow: hidden — 隐藏溢出部分，适合轮播图或截断文本
- overflow: auto — 按需显示滚动条，内容超宽时自动出现横向滚动
- overflow: scroll — 始终显示滚动条（即使不需要）
可单独设置方向：overflow-x: hidden 阻止水平滚动，overflow-y: auto 允许垂直滚动。
结合flex布局防止子元素撑开父容器
在弹性盒子中，子元素默认不收缩（flex-shrink: 1），但若设置了固定宽度或min-width，仍可能引起溢出。
解决方案包括：
- 给父容器设置 display: flex 并配合 overflow: hidden
- 为子项添加 min-width: 0 或 flex-shrink: 1，允许其压缩
- 使用 word-break: break-all 或 white-space: nowrap 控制文本换行
实际应用示例
一个常见场景是侧边栏固定宽度，主内容区自适应且内部长文本不导致横向滚动：
.container {display: flex;
}
.sidebar {
width: 200px;
}
.main {
flex: 1;
min-width: 0; /* 关键：允许压缩 */
overflow: auto;
box-sizing: border-box;
padding: 16px;
}
此时.main即使有内边距和大量文本，也不会让整个布局横向溢出。
基本上就这些。关键是统一使用border-box、合理设置溢出处理，并在flex或grid布局中注意子元素的伸缩性。问题大多能提前规避。
