设置max-height的绝对定位Flex容器宽度显示异常如何解决？

问题原因 #

• 这是列方向flex容器开启换行时的固有宽度计算逻辑问题：浏览器计算flex容器的默认宽度时，只会统计第一列的内容宽度，换行后新增的列宽不会被纳入总宽度计算，所以你这个场景里第二列的200px宽度没有被算到ul的总宽度中，灰色背景自然只能覆盖第一列的区域。
• 你写的li:nth-child(4n) { flex-basis: 100%; }属于冗余规则，你已经通过max-height限制了每列最多放4个元素，这个规则反而会挤占同列其他元素的高度空间，建议直接删除。

修复方案 #

你可以根据实际业务场景选择以下两种方案：

方案1：固定列数场景直接指定宽度 #

如果你的元素总数固定，列数不会变化（当前7个元素总共2列），直接给ul容器指定总宽度即可，修改后的CSS如下：

ul {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
  max-height: 80px;
  background-color: grey;
  padding: 0px;
  width: 400px; /* 新增：两列每列宽度200px，总宽度设为400px */
}

方案2：动态列数场景用Grid实现更稳定 #

如果元素数量不固定，列数会动态变化，更建议用CSS Grid实现需求，不需要依赖高度限制换行，容器宽度也会自动适配实际列数：

ul {
  display: grid;
  grid-template-rows: repeat(4, auto); /* 每列最多放4个元素，满了自动换列 */
  grid-auto-flow: column;
  list-style: none;
  background-color: grey;
  padding: 0px;
}

li {
  box-shadow: inset 0 0 1px #000;
  text-align: center;
  width: 200px;
}

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