title: How is padding calculated when using percentage (%)?
body: <p><strong>Why does the padding in this example not equal 300px?</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#Test{
    width:600px;
    padding-right:50%;
    box-sizing:border-box;
    background:#ddd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Test"&gt;
  TEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ H
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li><p>Where is the browser deriving it's calculation, 50% of what?  </p></li>
  <li><p>In the example below the padding actually becomes smaller as the container of <code>#Test</code> becomes larger.  </p></li>
  <li><p>I actually want the width of <code>#Test</code> to be dynamic however I've fixed it for the purpose of this example.</p></li>
  <li><p>And  how do I get 50% padding of <code>#Test</code>?</p></li>
  </ul>
  
  <p><strong><em>Notes:</strong> I am not just looking for a solution but an understanding of the way padding is working here.</em></p>