border-box with padding can't have 0 width

Question

Consider this code

div {
  box-sizing: border-box;
  
  width: 0;
  height: 0;    
  max-width: 0;
  max-height: 0;
  
  border: 1px solid gray;
  padding: 12px;
  overflow: hidden;
}

<div>Hi</div>

According to everything I've ever read, understood, and used about box-sizing: border-box; This should show nothing since the width and height are zero and padding/border are inside of the zero width and height.

What we see however is a 26x26 box ((12 padding + 1 border)*2). What gives? Why is border-box not working here?

Answer 1

According to the spec,

The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Therefore, your element effectively has a height and a width of 0. But you see it bigger because of the padding and the border.