嘿，这个问题我太熟了！其实是Flex布局的默认特性在“搞鬼”，我来给你拆解清楚：

问题根源 #

你给<ul>加了.d-flex类，设置了display: flex，但Flex容器默认的flex-wrap属性值是nowrap。这个属性的作用就是控制子项是否换行：

• nowrap：强制所有子项（也就是你的<li>元素）排在同一行，哪怕总宽度超出容器宽度，这时自然就会出现水平滚动条，也就是你现在看到的效果。
• wrap：当子项总宽度超过容器可用空间时，自动换行到下一行。

解决方案 #

只需要给你的.d-flex类添加flex-wrap: wrap属性就行，修改后的CSS代码如下：

.d-flex {
  display: flex !important;
  flex-wrap: wrap; /* 新增这一行，开启自动换行 */
}

.list-box {
  /* 这里是你的固定尺寸，示例值可根据实际需求调整 */
  width: 150px;
  height: 100px;
  background-color: #eee;
  margin: 5px;
  border: 1px solid #ddd;
}

额外优化（可选） #

如果想让换行后的布局更美观，还可以添加justify-content属性来控制子项的水平对齐方式，比如：

• justify-content: flex-start：默认左对齐
• justify-content: center：居中对齐
• justify-content: space-between：两端对齐，子项之间间距均匀
• justify-content: space-around：子项两侧间距均匀

示例代码：

.d-flex {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between; /* 实现两端对齐效果 */
}

这样修改后，你的列表项就会在填满可用空间后自动换行了~

内容的提问来源于stack exchange，提问作者Morvael