How to use FlexBox to make wrapped divs with percentage height

Question

I have the following flexbox CSS.

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
}

li {
  width: 50%; /* allows for 2 boxes per row */
  /* height: I don't know! */
  background: red;
  outline: 1px solid yellow;
}

<ul>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
</ul>

I have figured out how to make the widths a percentage so that 2 items appear per-row. But now I would like for the items to be the same height as whatever percentage width they end up being. Wondering how to do that.

Ideally, the solution would allow for the following cases:

1. Padding/margin between boxes.
2. Border on the boxes.
3. Just regular, where there's no padding or spacing between boxes or borders on the boxes.

I would like for the height to form into a square. So the question is what to do to form the divs into a square, no matter what percentage width it is. So I could have 3 or 4 divs per line, or 10 or 20 divs per line. I would like to then say "the height is x%" or something so it forms a square.

If it's not possible to form this system into squares, then I could explicitly size them. Then the question is how to center them so they fit into some width. But I would rather solve this problem with percentage widths.

And specifically I would like to use flexbox.

Answer 1

IS this what you were asking?

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
}

li {
  width: 50%; /* allows for 2 boxes per row */
  /* height: I don't know! */
  background: red;
  padding-top:50%;
  position:relative;
  outline: 1px solid yellow;
}
li a{
   position:absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);

<ul>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
  <li>
    <a>Foo</a>
  </li>
  <li>
    <a>Bar</a>
  </li>
</ul>