title: Percentage padding behaves unexpectedly in Firefox
body: <p>I'm experiencing strange behavior in Firefox (<s>v35</s> <s>v39</s> v52) regarding percentage padding. I cannot reproduce this issue in Chrome.</p>
  
  <p>I have an element with top padding set as a percentage, like this:</p>
  
  <pre><code>p {
      padding:10% 0 0;
      margin:0 0 1em;
      background-color:#CCC;
  }
  </code></pre>
  
  <p>Percentage padding on an element is <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties" rel="nofollow noreferrer">relative to its parent's width</a>. So, I expect that the padding at the top of the element will grow as the window's width is enlarged. This is indeed the result for my simple <code>&lt;p&gt;</code> tag.</p>
  
  <p>However, when that element is floated or has width, the percentage padding does not behave as expected when the window is resized. The padding <em>is</em> calculated correctly upon load. But, as the window is resized, the total height of elements that are floated or have width seems to remain the same. Text in the element is inexplicably placed at the bottom of an area that gets mysterious height. This happens for elements like this:</p>
  
  <pre><code>p {
      padding:10% 0 0;
      margin:0 0 1em;
      background-color:#CCC;
      float:left;
  }
  
  p {
      padding:10% 0 0;
      margin:0 0 1em;
      background-color:#CCC;
      width:150px;
  }
  </code></pre>
  
  <p>Here is an image to illustrate what I'm seeing. Color coding is added by Firebug; purple is padding, yellow is margin, and blue is the content of the element.</p>
  
  <p><img src="https://i.stack.imgur.com/5eOeh.jpg" alt="illustration of percentage padding problem in firefox"></p>
  
  <p>What causes this inconsistency? Can anyone else reproduce this issue in Firefox (or any other browser)?</p>
  
  <hr>
  
  <p>Here's a <a href="http://jsfiddle.net/vsvp71rw/1/" rel="nofollow noreferrer">fiddle to demonstrate</a>. In Firefox, try expanding or contracting the result pane to see the elements resize.</p>
  
  <p><s>I have not added a runnable code snippet, as I couldn't find an easy way of resizing the snippet area on-the-fly.</s></p>
  
  <p>I've added a stack snippet to demonstrate the issue. Use the "Full page" button so you can stretch the window's width.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body {
    margin: 0;
  }
  div#container {
    width: 100%;
  }
  p {
    padding: 10% 0 0;
    margin: 0 0 1em;
    background-color: #CCC;
  }
  p.width_limited {
    width: 150px;
  }
  p.floated {
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;p&gt;NORMAL&lt;/p&gt;
    &lt;p class="floated"&gt;FLOATED&lt;/p&gt;
    &lt;div style="clear:both;height:0;"&gt;&lt;/div&gt;
    &lt;p class="width_limited"&gt;HAS WIDTH&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>