Why 100vw + 100vh gives horizontal scroll?

Question

I have 3 divs 1 x 100% and 2 x 100vw.

Then if I set 100vh height to 100vw div (the black one) - I will get overflow-x and will get horizontal scroll.

Why is this happening? As per my understanding in this case 100vw should be equal to 100% as they're inside the body which doesn't have any margin/padding and has box-sizing: border-box.

show100vhDiv = function() {
  document.querySelector('.height-100vh').classList.toggle('hidden');
}

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Lato;
  padding-top: 30px;
}

.test {
  height: 30px;
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-transform: uppercase;
  letter-spacing: 20px;
}

.width-100vw {
  background: salmon;
  width: 100vw;
  overflow: hidden;
}

.height-100vh {
  background: black;
  height: 100vh;
  color: white;
}

.width-100 {
  width: 100%;
  background: mediumvioletred;
}

.hidden {
  display: none;
}

button {
position: relative;
left: 50%;
transform: translateX(-50%);
}

<button onclick="show100vhDiv()">Toggle 100vh x 100vw element</button>
<div class="test width-100vw">100vw</div>
<div class="test width-100">100%</div>
<div class="test width-100vw height-100vh">100vh x 100vw</div>

Just looks like margin on the `body`, have you tried adding `margin: 0;` to `body`? — BugsArePeopleToo, May 23 '19 at 15:36
Because 100VW includes space set aside for scrollbars. 100% does not. — Paulie_D, May 23 '19 at 15:38
https://lists.w3.org/Archives/Public/www-style/2013Jan/0200.html — Paulie_D, May 23 '19 at 15:41
@Paulie_D the question that you mendioned when marked as duplicate still not gives clear answer, will check this html — godblessstrawberry, May 23 '19 at 15:47
I beg to diiffer - https://stackoverflow.com/a/23367686/2802040 — Paulie_D, May 23 '19 at 15:52

Why 100vw + 100vh gives horizontal scroll?

0 Answers0