100vw powodujące przepełnienie w poziomie, ale tylko jeśli więcej niż jeden?

Powiedz, że masz to:

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

Dostaniesz coś, co wypełni ekran, bez pasków przewijania. Ale dodaj kolejny:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

Otrzymujesz nie tylko pionowe paski przewijania (oczekiwane), ale lekkie przewijanie w poziomie.

Zdaję sobie sprawę, że możesz pominąć szerokość lub ustawić ją na szerokość: 100%, ale jestem ciekawy, dlaczego tak się dzieje. Czy 100vw nie powinno być „100% szerokości widocznego obszaru”?

Jak już wyjaśniono w wf4, przewijanie poziome jest obecne dzięki przewijaniu pionowemu. które możesz rozwiązać, dając max-width: 100%.

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

Working Fiddle

paski przewijania zostaną uwzględnione w vwprzewijaniu, więc zostanie dodane przewijanie poziome, aby można było zobaczyć pod przewijaniem pionowym.

Gdy masz tylko 1 pudełko, ma 100% szerokości i 100% wysokości. Gdy dodasz 2, jego 100% szerokość x 200% wysokość, co spowoduje uruchomienie pionowego paska przewijania. Uruchomienie pionowego paska przewijania powoduje wyzwolenie poziomego paska przewijania.

Możesz dodać overflow-x:hiddendobody

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/

Miałem podobny problem i wymyśliłem następujące rozwiązanie przy użyciu zmiennych JS i CSS.

JS:

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', `${vw}px`);
}

setVw();
window.addEventListener('resize', setVw);

CSS:

width: calc((var(--vw, 1vw) * 100);

1vw to wartość rezerwowa.

Aktualizacja: od wersji Chrome 66 nie mogę już odtwarzać zachowania zgłaszanego w pytaniu. Wydaje się, że żadne obejście nie jest potrzebne.

Oryginalna odpowiedź

W rzeczywistości jest to błąd zgłoszony w tej odpowiedzi i w komentarzach powyżej.

Chociaż obejście w zaakceptowanej odpowiedzi (dodawanie .box {max-width: 100%;}) generalnie działa, uważam za godne uwagi, że obecnie nie działa display:table(testowane w Chrome). W takim przypadku jedynym rozwiązaniem, które znalazłem, jest użycie width:100%zamiast tego.

• Broken Fiddle zdisplay:table
• Praca Fiddle z display:tableiwidth:100%

aby pozbyć się szerokości paska przewijania zawartej w vw musiałem to zrobić:

html, body {
    overflow-x: hidden;
    height: 100vh;
}

*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;/*add This*/ 
}
/*and enjoy ^_^ */