@stephenirving the problem with horizontal scrollbar has nothing to do with the box sizing model but with the way current desktop browsers handle viewport messurements. They are simply unaware of the vertical scroll bar so the 100vw generates content under the vertical scrollbar if ir's present, triggering the horizontal one. To fix it you have to substract bar's width from the 100vw. The problem is that scollbars are similar but not the same on all browsers, so you have to substract a more or less safe width or use javascript to calculate the real scrollbar width and substract it on the fly.
Mi pure CSS solution was to add:
@media screen and (min-width:700px){
.row-full{
width: calc(100vw - 8.1px);
}
}
because the scrollbar issue is not present on mobile browsers where scrollbars do not take visual space.
@stephenirving the problem with horizontal scrollbar has nothing to do with the box sizing model but with the way current desktop browsers handle viewport messurements. They are simply unaware of the vertical scroll bar so the 100vw generates content under the vertical scrollbar if ir's present, triggering the horizontal one. To fix it you have to substract bar's width from the 100vw. The problem is that scollbars are similar but not the same on all browsers, so you have to substract a more or less safe width or use javascript to calculate the real scrollbar width and substract it on the fly.
Mi pure CSS solution was to add:
@media screen and (min-width:700px){
.row-full{
width: calc(100vw - 8.1px);
}
}
because the scrollbar issue is not present on mobile browsers where scrollbars do not take visual space.