title: Block Anchor containing Image overflows from container div
body: <p>I have the following element markup:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;a href="#"&gt;
          &lt;img src="http://placehold.it/250x500" alt="img" /&gt;
      &lt;/a&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>with this CSS:</p>
  
  <pre><code>.container { max-width: 150px; max-height: 150px; }
  .container a { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
  </code></pre>
  
  <p>​
  see <a href="http://jsfiddle.net/RedKnight91/E6aqZ/1/" rel="nofollow">this fiddle</a> (I added colors and opacity in there to better show my problem)</p>
  
  <p>The problem is that while the anchor is fitting to his parent's width (max-width: 100%;) it's not fitting to his parent's height, it fits his child img's height instead, and I really don't know why, since I set max-height: 100%. If I change the container's <strong>max-height</strong> to just <strong>height</strong> it works, but I need it to be <strong>max-height</strong>.</p>
  
  <p><strong>PS:</strong> I don't want to hide the container's overflow (overflow: hidden), I want the anchor to be the container's height!</p>
  
  <p><strong>PPS:</strong> The problem is not in the anchor, every item I put in the container as the img's parent is gonna fit the img's height unless I give a <strong>fixed height</strong> to the container or to the img's father (in my case, the anchor), but I don't want to do that, 'cause I need it to be fluid.</p>
  
  <p><strong>PPPS:</strong> I partially answered the question: I can set the anchor's max-height to inherit, like in <a href="http://jsfiddle.net/RedKnight91/E6aqZ/3/" rel="nofollow">this example</a>, but that's not gonna work for percentage max-height of the container, which is, unfortunately, what I need. </p>