html - 隐藏多列 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

在您的演示中有一个 Bootstrap 规则，它为整个容器提供 100% 的宽度:

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

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

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

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

因为我们知道高度，所以我们可以确定每列 flex 元素的确切数量。有了这些知识，我们就可以从容器中移除顶部和底部边框，并将它们应用于每一列中的顶部和底部 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