Prevent transform on position: fixed parent element from collapsing height

Question

If there exists children set with a height of 100%, and a transform is set on its position: fixed parent, the parent completely loses its height and collapses.

For example

.wrapper {
  transform: scale(1);  
}

.inner {
  height: calc(100% - 160px);
  width: calc(100% - 160px);
  margin: 80px;
  position: fixed;
  border: 4px solid blue;
  overflow-y: auto;
}

.child {
  height: 300px;
  border: 4px solid red;
}

<div class="wrapper">
  <div class="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

If you remove the transform: scale(1); on .wrapper, the document flows as desired.

One workaround I've found is instead of using 100% height on .inner, use 100vh, but that introduces other complications on mobile Safari and Chrome.

1. Why does transform applied to a fixed element collapse its children?
2. What alternatives exist such that I can apply a transform to a fixed element without the result of its children collapsing?