min-height percentages cannot be nested

Question

#background {
  background-color: #F00;
  height: 100px;
}

#outer {
  background-color: #0f0;
  min-height: 100%;
}

#inner {
  background-color: #00F;
  min-height: 100%;
}

<div id="background">
  <div id="outer">
    <div id="inner">
    </div>
  </div>
</div>

the #outer div has the full height of 100px, but the #inner div has a height of 0px. Why can min-height percentages not be nested?

Tested on Firefox and Chromium

This question asks about the same thing but there's no explanation of why this is expected behavior.