Safari CSS height 100% not working

Question

Safari is not executing height 100% in a child element. I have tried to change the display to table and table-cell but it doesn't work either. I also tried to display child items as flex, as explained here, but Safari is not stretching the image. Here's a simple Codepen:

ul.items {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  text-align: center
}

li {
  background-color: #f00;
  display: inline-block;
  vertical-align: top;
}

li a {
  background-color: #ff0;
  display: block;
  height: 100%;
  min-height: 100%;
}

http://codepen.io/retroriff/pen/woJOpz

Thank you!