CODEWITHSUNDEEP
htmlcss
user1834809
user1834809

Reputation: 1311

max-height nested not working

I am applying max-height to nested divs? but it is not working as expected root element working is perfect but child height not applying?

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

Upvotes: 2

Views: 582

Answers (1)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

Unfortunately, percentage heights are calculated from the explicitely specified height of the parent element, not its actual height. If height is not set, it is auto, which can't be used for percentage. Only Opera 12- (Presto) calculates percantage min-height from the specified min-height directly.

Assuming you don't care about old browsers (since you use such modern features like calc()), I'd suggest to try Flexbox for this layout.

Upvotes: 1

Related Questions