How is padding calculated when using percentage (%)?
<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>