html - ネストされた最大高さが機能しない

Question

ネストされた div に max-height を適用していますか? しかし、ルート要素の動作は完璧ですが、子の高さが適用されませんか?

<div style="max-height: calc( 33% - 10px);">
  <div style="height:30px;"></div>
  <div style="max-height: calc( 100% - 30px);">
    //height not applying
  </div>
</div>