1

I've built a web menu that mimics a Windows98 start menu. That menu has one key feature - it has fixed height and column width. If the number of items overflows the available space, a new column is created beside previous one. Perfect job for flexbox.

I need borders for every column of items. No problem for left/right borders. However the top/bottom borders overflows actual columns.

How can this be solved? Is using flexbox for this task correct?

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;
  }

w98 like menu with overflowing borders

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
srigi
  • 1,682
  • 1
  • 15
  • 30
  • On the screenshot you can see that there are two lines running all way to the right. These are the `border-top/border-bottom` of the container. I want this lines to end at the edge of last column instead. – srigi Feb 26 '16 at 19:06

1 Answers1

1

There's a bootstrap rule in your demo that gives the overall container a 100% width:

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

This rule is causing your top and bottom borders to extend the full length of the container.

If this rule is removed, your flex container narrows down to a width narrower than your three columns. Hence, your problem is still not solved. This is because there's a bug in flexbox where a flex container does not expand horizontally to accommodate new columns formed by wrapping.

The best solution, in my view, which appears to work perfectly, leverages the key characteristics of your layout. In particular, the fixed height.

Since we know the height, we can determine the exact number of flex items per column. And with that knowledge, we can remove the top and bottom borders from the container and apply them instead to the top and bottom flex items in each column:

.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

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Yeah, I expected that flex container would expand with more columns. Thanks for the link. Your solution is elegant, thanks for the idea. – srigi Feb 29 '16 at 07:04