100% safari height inside maximum height element

Question

I am trying to understand why Safari will not read its parent's max-height attribute as height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent maximum height and instead captures the height of the page.

Here you can see

CSS

body, html { height: 100%; margin: 0; } div { height: 100%; max-height: 300px; width: 100px; } div span { background: #f0f; display: block; height: 100%; } 

Markup:

 <div> <span></span> </div> 

I am using Safari 6.0.5 on OSX 10.8.5.

Answer 1

This problem occurs due to an error message in Webkit:

Error 26559 - When the height of the block is determined by the minimum height / maximum height, children with a percentage height have the wrong size

This seems to be fixed now for Chrome, but not for Safari.

The only workaround, other than JavaScript, that was used for me, uses absolute positioning in the parent element:

 div { position: absolute; } 

Demo

Try before you buy

Answer 2

A similar problem occurs in Safari if the parent uses the flexbox properties - the container will not accept 100% height. Another solution (besides position: absolute; ) would be to use the units of measure vh (viewing height):

 div { height: 100vh; }