Why doesn’t (the standard way of) making an element 100% the height of its parent work in Safari when the parent’s a flex item?

If you make the parent display: flex; flex-direction: column; and the child flex-grow:1; it should work.

<div class="parent">
  <div class="child">
      Content
  </div>
</div>

.parent{
  display:flex;
  flex-direction: column;
  background:blue;
  height: 300px;
}

.child{
  flex-grow:1;
  background:red;
  display:flex;
  align-items:center;
}

Check this code pen