flex布局下多列等高但边框错位，本质是border占用盒模型空间且box-sizing为content-box，必须统一设box-sizing: border-box使border包含在宽高内；父容器需有明确高度来源，子列禁用height: 100%，避免ie11兼容问题。
Flex布局下多列等高但边框错位怎么办
加了 display: flex 后列高一致，但左右边框看起来“不齐”或“被截断”，本质是 border 占用盒模型空间，而默认 box-sizing 是 content-box，导致边框向外撑开、破坏对齐。
- 必须给所有子列统一加
box-sizing: border-box，让border和padding包含在设定的宽高内 - 父容器不需要设
height，但要确保它有明确的高度来源（比如被上层flex: 1分配，或设了min-height） - 避免子列写
height: 100%—— Flex 的align-items: stretch会自动拉伸，硬写反而可能触发 IE11 兼容问题 - 若某列内容极少，底部留白过大，可在子列内部用
display: flex; flex-direction: column+margin-top: auto把按钮/操作区“钉”到底部
Grid实现三列等高+双边框的注意事项
用 display: grid 做等高更结构化，但边框叠加容易出视觉误差：相邻列的左右边框会“重叠”或“间距异常”，尤其在 gap 和 border 同时存在时。
- 推荐用
gap: 1px替代列间border-right，再统一给每列加border-left和border-right，避免 gap 与 border 冲突 - 必须显式写
align-items: stretch（虽是默认值，但部分旧版 Safari 会忽略） - 若某列内部有图片或 iframe，记得加
max-width: 100%; height: auto，否则撑高单列，导致整行拉伸基准偏移 - 不要用
grid-template-rows: 1fr强制等高——这会让所有行都固定为相同高度；真正需要的是每行内子项等高，靠align-items: stretch就够了
IE11中Flex等高失效且边框错乱怎么兜底
IE11 对 align-items: stretch 支持不全，尤其当子项有 min-height: 0 或父容器用 min-height 替代 height 时，等高直接失效，边框也会因盒模型计算错误而错位。
- 对 IE11 单独加前缀：
display: -ms-flexbox，并显式写-ms-align-items: stretch - 子项禁用
flex: 1，改用-ms-flex: 1，且避免和height同时出现（IE 优先按height渲染） - 兜底方案：给子列加
display: table-cell; vertical-align: top，同时父容器设display: table; width: 100%；注意此方案下flex-wrap无效，仅适用于单行布局 - 边框统一用
outline替代border（outline不参与盒模型计算），可规避 IE 中 border 撑开导致的错位
多列等高后内容溢出或滚动条位置不对
等高只是布局层对齐，不代表内容自动适配。常见问题是短列底部大片留白，长列文字被截断或滚动条出现在错误位置（比如整个列可滚，而不是仅内容区）。
- 滚动区域必须限定在子列内部具体容器上（如
.content），而非整个列元素；给该容器设flex: 1; overflow-y: auto - 避免在子列上直接设
height或max-height，改用min-height: 0防止 Grid/Flex 轨道收缩（尤其内部嵌套 Flex 时） - 如果列内有标题+正文+操作按钮，建议结构为：
div.flex-column > header + main.flex-1 + footer，其中main设overflow-y: auto - 滚动条宽度会影响布局——Chrome 默认 17px，Safari 更窄；统一用
scrollbar-width: none（Firefox）或::-webkit-scrollbar { width: 0 }隐藏，再靠padding-right补偿
height: 100% 就算有，而是要看它是否被上层容器用 flex: 1 或 height 显式分配了空间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
