在具有多列的 flex 容器中隐藏溢出的边框

Question

我已经建立了一个模仿 Windows98 开始菜单的网络菜单。该菜单有一个关键特性——它具有固定的高度和列宽。如果项目数超出可用空间，则会在前一列旁边创建一个新列。 flexbox 的完美工作。

我需要为每一列项目设置边框。左/右边框没问题。但是，顶部/底部边框会溢出实际的列。

如何解决？使用 flexbox 执行此任务是否正确？

Codepen

.w98smenu {
  align-content: flex-start;
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
  border-left: 1px solid silver;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 1rem 0;
  max-height: 33rem;
  padding: 0;
}
  .w98smenu li {
    border-right: 1px solid silver;
    cursor: pointer;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0.15rem 0.5rem;
    width: 15rem;
  }
  .w98smenu li:last-child {
    border-bottom: 1px solid silver;
  }

Answer 1

您的演示中有一个引导规则，它为整个容器提供 100% 的宽度：

.col-xs-12 { width: 100%; }

此规则会导致您的顶部和底部边框延伸到容器的整个长度。

如果删除此规则，您的 flex 容器会缩小到宽度比您的三列更窄。因此，您的问题仍未解决。这是因为 flexbox 中有一个错误，其中a flex container does not expand horizontally to accommodate new columns formed by wrapping。

在我看来，似乎完美运行的最佳解决方案利用了布局的关键特征。特别是固定高度。

由于我们知道高度，我们可以确定每列的弹性项目的确切数量。有了这些知识，我们可以从容器中移除顶部和底部边框，并将它们应用到每列中的顶部和底部 flex 项：

.w98smenu li:first-child {
  border-top: 1px solid silver;
}

.w98smenu li:last-child {
  border-bottom: 1px solid silver;
}

.w98smenu li:nth-child(18n) {
  border-bottom: 1px solid silver;
}

.w98smenu li:nth-child(18n + 1) {
  border-top: 1px solid silver;
}

Revised Demo