Thought about it a bit more and it can’t be done without guessing at some magic numbers to account for scrollbar width which would result in incorrect placement when the vertical scrollbar was not triggered anyway.
I commented on this 3 years ago that including the scrollbar in the vh unit was a very poor choice and makes it more or less useless unless you have hidden scrollbars on html and body. If they’d implemented vh to not include scrollbars then you could have just made scrollbars visible and all would be well. The reverse isn’t true unfortunately.
Looks like the only viable solution is to have separate containers as already mention by Sam and coothead.
In case you were interested in the magic number solution you could do this.
#wide-div {
margin-left: calc(-50vw + 50% + 8px);
width: calc(100vw - 17px);
border: 2px solid green;
}
That will account for most browser scrollbar widths but of course on browsers that don’t have a scrollbar (like those on the mac that appear overlaid on top of the content when scrolling) then you will get a slight gap at the left and right edges of the div. The same applies when there is no vertical scrollbar on the viewport also. Other than the above there seems to be no other solution for this.