Is box-sizing: border-box safe to use with max-width and min-width?

Question

I've been reading on a couple of older resources that the use of max-width and min-width is buggy when combined with box-sizing: border-box. Does anyone else combine max/min-width with box-sizing: border-box and have any issues?

I plan to build a site with * {box-sizing: border-box} set globally for all elements but need to also use max-width but don't want to if it's going to cause issues.

Answer 1

There are no issues that I'm aware of. Bear in mind though that when border-box is used, padding and border heights and widths are effectively consumed by the total height and width of the element. With this, for instance, specifying both a max-height of 100px and padding-bottom of 100px will make your element exactly 100px in height; not 200px. If you wanted 100px height and 100px bottom padding, you'd need to give your element a max-height of 200px.

Here is a JSFiddle example using border-bottom to illustrate the difference.