Padding overrides height of the element with box-sizing: border-box - html

Question

In snippet below padding-top overrides the height and max-height properties of container:
I want this <div> to be 10px high, but its 100px because of padding-top
as far as I understand this should be solved by box-sizing: border-box but this doesn't help
w3schools - border-box: the width and height properties (and min/max properties)
includes content, padding and border, but not the margin
.padding-test {
background: linear-gradient(109deg, #3adffd, #00abfb);
outline: 1px solid #3b3c6d;
width: 100%;
padding-top: 100px;
max-height: 10px;
height: 10px;
box-sizing: border-box;
}
<div class='padding-test'></div>
Can someone explain why is this happening and how to fix this?
Same happens for width and padding-left
UPD: I faced this issue when tried to change max height for box sized by aspect-ratio approach. I solved initial issue by setting parent size, but I still want to understand how border-box works with the padding - does it shrinks only content? is this correct behavior? is there any solution for this exact situation - can I override padding somehow?

Answer 1

I had run into the same doubt. According to MDN:
border-box
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide, with the area for content being 330px wide. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
so box-sizing: border-box doesn't mean you can set the "border box" directly, but only affects how "content box" is calculated, which cannot be negative.
And my solution is: avoid the paddings, use a height-holding div or ::before pseudo element with designated height instead. (may also need overflow: hidden.) For example:
.padding-test {
height: 10px;
box-sizing: border-box;
overflow: hidden;
}
.padding-test::before {
height: 100px;
content: '';
display: block;
}