即使在使用框大小時添加包含div的填充更改大小：border-box;

Question

在以下示例中，單擊該按鈕將爲div稱爲標籤添加一些填充。 通過單擊12次或更多次，包含紅色按鈕的div大小開始更改大小。

我已經使用box-sizing: border-box;和overflow:hidden。我需要：

• 在固定的尺寸保持在div命名按鈕總是
• 如果標籤沒有因爲它的填充適合，DIV命名的標籤應該是容器

如何外部看不到修復我的腳本？多謝你們！ :)

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

把它放進一個容器

<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

這是因爲在這種情況下，兩次填補已經比DIV的原始高度多，而且大型填充不能被納入原有的高度了（這box-sizing: border-box;通常會）。

Answer 3

我做了周圍的按鈕，一個div一個隱藏的溢出，並解決這個問題;）

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