How to keep wrapped flex-items the same width as the elements on the previous row?

Question

I have a

that is a flex-box and a bunch of
• s in it which are the flex-items.

  I am trying to get the

Answer 1

This isn't perfect but worth try. http://codepen.io/anon/pen/MKmXpV

The changes are

li
  width: 7.1428%
  flex: 0 0 auto

figure
  margin: 0 auto
  background-color: darkgreen
  min-width: 40px
  max-width: 100px

• changed li flex to "0 0 auto" and the li width to a percentage based on the number of lis.
• moved the min and max widths from the li to the figure
• moved the green background to the figure and centered the figures in the lis