title: css max-height of child of inline-block element not working
body: <p>I'm trying to create a menu the size of the viewing window that is split into 9 equal boxes. Here's what I have so far </p>
  
  <p>PS. I HAVE tried display: table, but I want to control the overall size of the table and not have it fit the content size</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class='nav'&gt;
        &lt;!-- this will be a 9 box nav  3 rows 3 columns...--&gt;
        &lt;div class='row'&gt;
            &lt;a class='cell' href=''&gt;
                &lt;img src='' class='icon'/&gt;
            &lt;/a&gt;
            &lt;a class='cell' href=''&gt;
                &lt;img src='' class='icon'/&gt;
            &lt;/a&gt;
            &lt;a class='cell' href=''&gt;
                &lt;img src='' class='icon'/&gt;
            &lt;/a&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>note: I've removed the actual links since they won't work here anyway</p>
  
  <p>css:</p>
  
  <pre><code>*, *:before, *:after {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box; 
  }
  
  /*size the menu to fit in the viewing window*/
  body div.nav {
      width: 100vw;
      height: 100vh;
      max-width: 100vw;
      max-height: 100vh;
  }
  
  /* size the rows to be 1/3rd the height of the page*/
  body div.nav div.row {
      text-align: center;
      max-width: 100%;
      width: 100%;
      overflow: hidden;
      max-height: 32.5%;
      height: 32.5%;
      min-height: 32.5%; 
  }
  
  /* set the cells to take up 1/3rd of the width */
  body div.nav div.row a.cell {
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: top;
      zoom: 1;
      *display: inline;
      max-width: 32.5%;
      min-width: 32.5%;
      max-height: 100%;
  }
  
  /* limit the image to fit in the parent link */
  body div.nav div.row a.cell img {
      max-height: 100%;
      max-width: 100%; 
   }
  </code></pre>
  
  <p>It's the last part that isn't working. The image resizes width-wise, but the max-height doesn't seem to be working. Any ideas? Thanks in advance for the help, this is driving me batty</p>
  
  <p>NOTE: this does seem to work in safari but not chrome or firefox</p>