How to create “collapsed” borders around flex items and their container?

Answer 1

Here's another idea I had that will keep borders "collapsed" when flex boxes wrap. It uses background color for top and left and borders for right and bottom. It might be hard to make it work over a background image.

.container {
  display: flex;
  flex-flow: row wrap;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: black;
  background-color: black;
}

.container>div {
  flex: 1 0 auto;
  margin: 2px 0 0 2px;
  background-color: white;
}

  
Eh?
  
Bee.
  
This div contains a whole bunch of stuff.
  
This div contains a whole bunch of stuff.
  
This div contains a whole bunch of stuff.
  
Sea!
  
This div contains a whole bunch of stuff.
  
This div contains a whole bunch of stuff.
  
This div contains a whole bunch of stuff.