I have the following 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>As you can see, the list items inside the ul have a border with the width of 2px, but because of this, the border between elements doubles. I'm looking for a way to make the borders the same width between elements, while also keeping the border on the outside the same (similar to how border-collapse works on tables) using flexbox. Is this possible, and if so, how?