html - Safari on windows won't respect parent's element max-height -

In Safari, the maximum element of the original element is not considered to be limited to height

< Em> It gives in Safari:

The only solution I got was to set the height of children with the maximum-height property.

code:

  html {height: 100%; Body {height: 100%; Margin: 0; Padding: 0; }. Menuu-ctn {boundary: 1px solid # ff6a00; Maximum-height: 40px; Height: 100%; } .MEU-CTN ul {height: 100%; Text align: center; Border: 1px solid # 00ff21; Maximum-height: heirs; / * Safari only override * / & lt; = Solution}. Menu-CTN ul li {width: 24%; Display: Inline-block; Vertical-row: middle; Height: 100%; Background-color: # 0094ff; Maximum-height: heirs; / * Safari only override * / & lt; = Solution}  

  & lt; Body & gt; & Lt; Div class = "menu-ctn" & gt; & Lt; Ul & gt; & Lt; Li & gt; X & lt; / Li & gt; & Lt; Li & gt; Y and lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

The expected result is that the elements of all the children of the parents where maximum-height is determined, are respected :

I tested it on Mac at Safari 7.1.3 and Google Chrome version 41.0.2272.8 9.

It appears to be a safari Try to override the property with a media query on the Windows issue only, which filters the Safari 5 + from Chrome with the proxy:

  @ media screen and (-webkit-min) -device-pixel-ratio: 0) {/ * Safari ONLY override * /: i-block-chrome. Menuu-ctn ul {height: 25%; }}