If you click the Button in the following example, it will add padding to a div called label. If you click it 12 times or more, the size of the containing div named button will start to change size and turn red.
I have already applied box-sizing: border-box; and overflow: hidden. I need to:
- Maintain the fixed size of the div named button
- If label cannot fit due to padding, the div named label should not be visible outside the container
Can anyone help me fix my script? Thank you in advance! :)
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>