Divider 分割线在 Flex 布局里不显示怎么办？
我在用 Vue3 + Element Plus 写一个列表页，想在两个卡片之间加个分割线，就用了 <el-divider></el-divider>。但奇怪的是，页面上完全看不到分割线，检查元素发现它高度是 0。
我外层用了 flex 布局，是不是这个原因？试过给 divider 加 height 或 border，但感觉这不是正确做法。代码大概是这样的：
<div style="display: flex; flex-direction: column;">
<div>内容A</div>
<el-divider></el-divider>
<div>内容B</div>
</div>1 条解答
解决办法很简单，给 el-divider 加个
flex-shrink: 0就行：或者更规范的方式是用 class：
原理就是 Flex 项目默认是可以收缩的（flex-shrink: 1），el-divider 内部没有内容，尺寸为 0，就被压没了。设为 0 后就强制不收缩，分割线就能正常显示。
如果你想控制分割线的粗细，可以直接改 border-width，Element Plus 的 divider 默认用的是 border-top。