You are right, it has nothing to do with your explanation. However, it does have an impact on your debug code, specifically the border.
If the box-sizing is the default content-box, borders will be added to the total width of an element. So by using a border of 1px, you create a total width of 100% + 2px, which means you still get a horizontal scrollbar.
When using an outline this would not be an issue since an outline has no layout.
Has anyone tried using 100vw with the below?
I've never tried using it with box-sizing before, but I don't think box-sizing has anything to do with this case at all.
You are right, it has nothing to do with your explanation. However, it does have an impact on your debug code, specifically the border.
If the
box-sizing
is the defaultcontent-box
, borders will be added to the total width of an element. So by using a border of1px
, you create a total width of100% + 2px
, which means you still get a horizontal scrollbar.When using an
outline
this would not be an issue since an outline has no layout.thanks, that works for me