max-height嵌套不起作用

Question

我将max-height应用于嵌套div？但它不能正常工作根元素工作是完美的但是儿童身高不适用？

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

Answer 1

不幸的是，百分比高度是根据父元素的明确指定的 height计算的，而不是其实际高度。如果未设置height，则为auto，不能用于百分比。只有Opera 12-（Presto）直接从指定的min-height计算percantage min-height。

假设您不关心旧浏览器（因为您使用calc()等现代功能），我建议您尝试使用Flexbox进行此布局。