Using max-height with border-box

Question

Why isn't max-height applied on the box in this example ? It seems like that the border-box mode is ignored (tested on Chrome), but it seems counterintuitive.

Answer 1

The box-sizing property isn't ignored, this is exactly how the border-box value should behave:

Your padding is set to 100px on top and bottom, therefore 200px of your element's height is consumed by the padding.

If you specify a height of 200px, the computed height will be 0 because 200 - 200 is 0.

If you specify a height of 201px, the computed height will be 1, etc.

From the box-sizing documentation:

The content width and height are calculated by subtracting the padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative, this computation is floored at 0.

This is easily demonstrated using borders instead of padding:

#test {
  background: #000;
  border-width: 100px 0;
  border-style: solid;
  border-color: red;
  height: 200px;
  box-sizing: border-box;
}

Here our element has a black background and a red border, however as its height is equal to the sum of the top and bottom border widths, the element ends up with 0px computed:

As you can see, the box is entirely red. The element has no height so there is no black background to be seen. If we adjust the element's height to 250px, we end up with:

The element's computed height here is 50px, so we see 50px of the background. The remaining 200px is consumed by the border.