How to compute the percentage height to a child element of an `height:auto` parent?

CSS

#parent {
  height: auto;
}

#child {
  height: 10%;
  width: 75%;
}

HTML

<div id="parent">
  <div id="child">
    <span>I'm one tenth the height of my parent.</span>
  </div>
</div>

Is this a forbidden or wrong usage? This is a bit confusing because child relies on the parent's height to calculate its own height, and the parent also relies on the child's height to calculate the height:auto..

How will the browser compute the height for the child and parent element for the above codes?