title: Safari on windows won't respect parent's element max-height
body: <p>In Safari the max-height of the parent element is not assumed to limit the height. </p>
  
  <p><em>This is how it renders in safari:</em> </p>
  
  <p><img src="https://i.stack.imgur.com/Lcn9A.jpg" alt="enter image description here"></p>
  
  <p>The only workaround I found is to set the children element also with the max-height property.</p>
  
  <p>Code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    
    height: 100%;
  
  }
  
  body {
  
    height: 100%;
  
    margin: 0;
  
    padding: 0;
  
  }
  
  .menu-ctn {
  
    border: 1px solid #ff6a00;
  
    max-height: 40px;
  
    height: 100%;
  
  }
  
  .menu-ctn ul {
  
    height: 100%;
  
    text-align: center;
  
    border: 1px solid #00ff21;
  
    max-height: inherit;    /* Safari only override */  &lt;= Solution
  
  }
  
  .menu-ctn ul li {
  
    width: 24%;
  
    display: inline-block;
  
    vertical-align: middle;
  
    height: 100%;
  
    background-color: #0094ff;
  
    max-height: inherit;    /* Safari only override */  &lt;= Solution
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="menu-ctn"&gt;
      &lt;ul&gt;
        &lt;li&gt;X&lt;/li&gt;
        &lt;li&gt;Y&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The expected result is that all the children elements of the parent where the max-height is set is respected:</p>
  
  <p><img src="https://i.stack.imgur.com/7TFlD.jpg" alt="enter image description here"></p>