VW and VH units are not accurate
width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/
This CSS should give me the exact(100%) dimensions of the viewport. But it is apparently too large because it's causing an overflow on the page.
It is not padding, margin, or outline because I removed all of that.
note It also seems that it only "grows" bigger than the projected dimensions when I add two divs with these dimensions. (but it's always the case in jsfiddle)
Should I just consider it a bug and write a work around? Or am I missing something?
Answer
The viewport measurements are accurate. The problem lies in the fact that your div is an inline-block. The browser renders your inline-block element on a line box. The whitespace underneath your div comes from the baseline of this line box; it is the area where typographic descenders should go. This additional space, combined with your div, is what results in overflow.
If you remove the display: inline-block declaration so that your div is rendered as a block-level element, the scrollbars will go away and the div will fit the viewport exactly.
If you need this element to be an inline-block for some reason, setting vertical-align: top (or bottom or middle) seems to fix it.