Today I came across a lesson Percentages: Height & Width
At the bottom I read a section that said:
Note: Because the box model includes padding, borders, and margins, setting an element’s
100%may cause content to overflow its parent container. While tempting,
100%should only be used when content will not have padding, border, or margin.
The part that stuck out to me was:
100% should only be used when content will not have padding, border, or margin.”
I then began to think "wait did I not learn we could use “box-sizing: border-box” which states:
In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change.
Link: Box Model: Border-Box
So really should it not say:
100% should only be used when content will not have margin.”?
Or does box-sizing: border-box sometimes not work when conditions (padding, border, and margins) are used?
Or am I just overthinking the lesson and this is just a general statement on “Percentages: Heights & Width”?
Thanks for any feedback in advance!