Ich habe das folgende Layout:

#limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  border: 2px solid rgba(0,0,0,.3);
  background-color: rgba(0,0,0,.03);
}

<div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

ie Sie sehen können, werden die Listenelemente imul hat einen Rand mit der Breite von2px, aber aus diesem Grund verdoppelt sich die Grenze zwischen Elementen. Ich suche nach einer Möglichkeit, die Ränder zwischen den Elementen gleich breit zu machen, während gleichzeitig der äußere Rand gleich bleibt (ähnlich wie beiborder-collapse funktioniert auf Tabellen) mit flexbox. Ist das möglich und wenn ja, wie?