title: Adding padding change size of containing div even when using box-sizing: border-box;
body: <p>In the following example, clicking the Button will add some padding to div called label.
  By clicking 12 times or more, the size of the containing div called button in red start to change size.</p>
  
  <p>I have already used <code>box-sizing: border-box;</code> and <code>overflow:hidden</code>. I need to:</p>
  
  <ul>
  <li>keep the div named button always at fixed size</li>
  <li>if label does not fit because of its padding, div named label should be not visible outside the container</li>
  </ul>
  
  <p>How to fix my script? Thanks guys! :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let btn = document.getElementById('btn');
  let label = document.getElementById('label');
  let button = document.getElementById('button');
  let padding = 5;
  btn.addEventListener('click', event =&gt; {
        padding += 5;
        button.style.padding = `${padding}px`;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  #button {
    width: 200px;
    height: 100px;
    background-color: red;
    overflow: hidden;
  }
  
  #label {
    font-size: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="btn"&gt;Click me to add more padding&lt;/button&gt;
  &lt;div id="button"&gt;
    &lt;div id="label"&gt;
      Click me!
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>