Adding padding change size of containing div even when using box-sizing: border-box;

Question

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.

I have already used box-sizing: border-box; and overflow:hidden. I need to:

• keep the div named button always at fixed size
• if label does not fit because of its padding, div named label should be not visible outside the container

How to fix my script? Thanks guys! :)

let btn = document.getElementById('btn');
let label = document.getElementById('label');
let button = document.getElementById('button');
let padding = 5;
btn.addEventListener('click', event => {
      padding += 5;
      button.style.padding = `${padding}px`;
});

* {
  box-sizing: border-box;
}

#button {
  width: 200px;
  height: 100px;
  background-color: red;
  overflow: hidden;
}

#label {
  font-size: 50px;
}

<button id="btn">Click me to add more padding</button>
<div id="button">
  <div id="label">
    Click me!
  </div>
</div>

Answer 1

Put it into a container

<button id="btn">Click me to add more padding</button>
<div class="button-container">
    <div id="button">
        <div id="label">
            Click me!
        </div>
    </div>
</div>

CSS

* {
  box-sizing: border-box;
}  

.button-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}    

#button {
  width: 100%;
  height: 100%;
  background-color: red;
}  

#label {
  font-size: 50px;
}

Answer 2

I've made a div around the button with an hidden overflow and it fix the issue ;)

HTML :

<button id="btn">Click me to add more padding</button>
<div class="over">
  <div id="button">
    <div id="label">
      Click me!
    </div>
  </div>
</div>

CSS :

.over { overflow: hidden; height: 100px; width: 200px; } 

See this fiddle

Answer 3

That's because in this case two times the padding is already more than the original height of the DIV, and the that large padding cannot be included into the original height anymore (which box-sizing: border-box; usually does).