Wysokość Safari 100% elementu wewnątrz elementu o maksymalnej wysokości

Question

Próbuję ustalić, dlaczego Safari nie odczyta atrybutu maksymalnej wysokości swojego rodzica jako wysokości. Zarówno Chrome, jak i Firefox odczytają go poprawnie, ale Safari wydaje się zignorować maksymalny wzrost rodzica, a zamiast tego chwyta całą wysokość strony.

Widać to here

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> 

Używam Safari 6.0.5 na OSX 10.8.5.

Answer 1

Ten problem występuje z powodu zgłoszonego błędu w Webkit:

Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly

To wydaje się być ustalona dla Chrome już, ale nie dla Safari.

Jedyne obejście zakaz JavaScript, który pracował dla mnie, jest przy użyciu pozycjonowania bezwzględnego od elementu nadrzędnego:

div {  
    position: absolute; 
} 

Demo pojawi

Try before buy

Answer 2

podobny problem na Safari czy element nadrzędny używa właściwości flexbox - kontener nie zajmie 100% wysokości. Innym rozwiązaniem (oprócz position: absolute;) byłoby użyć vh jednostek (wysokość ekranu):

div { 
height: 100vh; 
}