如何防止Flex布局内容溢出到伪元素区域？

问题描述 #

我采用列表布局，每行<li>内部包含5个带flex-basis属性的<div>分配内容空间，这些<div>都带有data-label属性，用于在移动端视图中显示替代标题。在媒体查询中设置了如下样式：

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

设置后底部3列能正常过渡并对齐，但顶部列却溢出到:before伪元素区域。

现象专业术语 #

该现象属于Flex项目内容溢出（Flex Item Content Overflow），更具体是因伪元素布局上下文未被正确纳入Flex流，导致Flex项目尺寸计算错误引发的布局重叠（Layout Overlap）。

解决方案 #

核心问题是content属性被错误应用到.col元素本身（content仅对伪元素:before/:after生效），同时Flex布局约束未覆盖所有元素，导致布局冲突。修正步骤如下：

1. 修正content属性的应用对象，将移动端标签内容通过伪元素显示：

@media (max-width: 768px) {
  .col:before {
    content: attr(data-label);
    flex-basis: 107px;
    text-align: left;
    padding-right: 10px;
    display: inline-flex; /* 确保伪元素作为Flex项目参与布局 */
  }
}

2. 给Flex容器（<li>）添加换行属性，避免元素溢出容器：

li {
  display: flex;
  flex-wrap: wrap;
}

3. 为.col设置Flex增长属性，确保内容部分占据剩余空间，同时限制内容溢出：

@media (max-width: 768px) {
  .col {
    flex: 1;
    word-break: break-word; /* 防止长文本溢出 */
  }
}

内容的提问来源于stack exchange，提问作者B. Dionys