如何防止 flex 溢出到伪元素中

Question

我有一个列表，其中我使用 5 个带有

flex-basis

的 div 来分隔每 li 行中的内容。这些 div 中的每一个都有一个

data-label

属性，带有用于移动设备的替代视图的标题。所以我有一个看起来像这样的媒体查询：

.col {
  content: attr(data-label);
  flex-basis: 107px;
  text-align: left;
  padding-right: 10px;
}

通过上面的设置，我得到了以下结果，我真的不知道它的术语。在屏幕截图中，我观察到底部的 3 列已正确过渡并整齐对齐。但是最上面的一个因为某种原因¿溢出了？进入了

:before

的区域

有谁知道这种行为的正确术语，或者有任何关于如何防止这种情况发生以便它们整齐排列的提示？我已经尝试了很多在元素检查中摆弄的东西，看看有什么效果，但我就是想不通。