title: Child element with height 100% is including parent's padding
body: <p>I have a relatively simple setup inside part of my website:</p>
  <pre><code>&lt;body&gt;
  &lt;!-- ... a few &lt;div&gt; ... --&gt;
      &lt;div class=&quot;root&quot;&gt;&lt;div&gt;&lt;a&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;!-- ... a few &lt;/div&gt; ... --&gt;
  &lt;/body&gt;
  </code></pre>
  <ul>
  <li>The <code>body</code> is <code>white-space: nowrap</code> and <code>font-size: 0px</code>.</li>
  <li>The outer <code>div.root</code> is <code>display: grid</code> with an explicit, static <code>width</code> and <code>height</code>. Single row/column of <code>min-content</code>.</li>
  <li>The inner <code>div</code> is <code>display: block</code> with no explicit <code>height</code>.</li>
  <li>The <code>a</code> is <code>display: inline-block</code>. It has padding but no explicit <code>height</code>. <code>line-height</code> and <code>font-size</code> are explicitly 0.</li>
  <li>The <code>span</code> is <code>display: inline-block</code> with <code>height: 100%</code>. It is completely empty.</li>
  </ul>
  <p><a href="http://jsfiddle.net/3h8cdkov/1/" rel="nofollow noreferrer">JSFiddle example</a></p>
  <p>In the JSFiddle example the <code>span</code> (which would be pictured as a red rectangle below) is 0 height regardless of the <code>a</code>'s padding. This is what I would expect.</p>
  <p><a href="https://i.stack.imgur.com/f5cpF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f5cpF.png" alt="x" /></a></p>
  <p>But on my website the <code>span</code>'s height is controlled by the <code>a</code>'s padding! If the <code>a</code>'s padding is 100px then the <code>span</code>'s height is 100px. If the <code>a</code>'s padding is 0 then the <code>span</code>'s height is 0. If I explicitly set the <code>a</code>'s height to any value (including <code>fit-content</code>) other than <code>auto</code> the behavior goes away and the <code>span</code>'s height ignores the padding of <code>a</code> (as in the JSFiddle example). Also, the <code>div</code> doesn't seem to be accounting for the height of the <code>span</code>/<code>a</code>.</p>
  <p><a href="https://i.stack.imgur.com/9r8kG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9r8kG.png" alt="x" /></a> <a href="https://i.stack.imgur.com/0oJut.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0oJut.png" alt="x" /></a> <a href="https://i.stack.imgur.com/Sl8r7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sl8r7.png" alt="x" /></a> <a href="https://i.stack.imgur.com/N2Bc3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N2Bc3.png" alt="x" /></a></p>
  <p>Neither <code>border-box</code> or <code>content-box</code> settings for <code>box-sizing</code> (applied to all elements) make a difference (in both the JSFiddle and my website). The only notable difference between the example and my website is that on my website the above setup is contained within other elements. I've checked the whole ancestor chain for anything that might lead to this behavior, but I can't find anything.</p>
  <p>Does anyone have any suggestions to try to find the culprit? Can anyone reproduce the behavior I'm seeing on my website?</p>
  <p>Browser: <code>Microsoft Edge 103.0.1264.62</code></p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th>Element</th>
  <th>JSFiddle</th>
  <th>My Website</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td><code>div.root</code></td>
  <td><a href="https://i.stack.imgur.com/fP03I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fP03I.png" alt="x" /></a></td>
  <td><a href="https://i.stack.imgur.com/oTJPs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oTJPs.png" alt="x" /></a></td>
  </tr>
  <tr>
  <td><code>div</code></td>
  <td><a href="https://i.stack.imgur.com/RGKQJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RGKQJ.png" alt="x" /></a></td>
  <td><a href="https://i.stack.imgur.com/myAHb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/myAHb.png" alt="x" /></a><br/>Why is this height 30px when the <code>a</code> is height 60px?</td>
  </tr>
  <tr>
  <td><code>a</code></td>
  <td><a href="https://i.stack.imgur.com/WsRYx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WsRYx.png" alt="x" /></a></td>
  <td><a href="https://i.stack.imgur.com/JrN2e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JrN2e.png" alt="x" /></a></td>
  </tr>
  <tr>
  <td><code>span</code></td>
  <td><a href="https://i.stack.imgur.com/GGjOA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GGjOA.png" alt="x" /></a></td>
  <td><a href="https://i.stack.imgur.com/Q4vsd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q4vsd.png" alt="x" /></a></td>
  </tr>
  </tbody>
  </table>
  </div>