Square Blocks with Flex Box

Question

Is there a way to get all boxes to be equal to the height (and width) of the largest box using display: flex; with flex-wrap: wrap;. It appears to only work on folks in the same line. This pen illustrates the problem some more: http://codepen.io/komplexb/pen/gbqgXq

Answer 1

Given that you are already setting a height on the parent element (and that the parent element is square), you would just need to give the children flexbox items a height of 50%.

In doing so, the flex-basis (shorthand) value of 50% combined with a height of 50% will result in perfectly square flexbox items since the parent is square.

Updated Example

li {
  flex: 0 0 50%;
  height: 50%;
  color: white;
  text-align: center;
}