May 20, 2020 (updated July 19, 2024)

100vw Is Bait

If you want something to fit across the viewport, using 100vw would make sense. It stretches across the screen and responds to all screen size changes.

The problems comes when you have the screen need to scroll vertically. Most websites work this way so it starts to have problems. The scroll bar now takes viewport space without it reflecting on the vw variable.

The work around for 100vw is to use a lower vw, 94vw maybe. You need to account for all screens scrollbar size so it starts to fall apart.

100%

One pattern I use to get full 100% width is to make the parent elements width to 100%.

html,
body {
  width: 100%;
}

main {
  width: 100%;
}

<html>
  <body>
    <main></main>
  </body>
</html>

This will allow your <main> element extend across the body to 100% and keep the viewport width. Then each child you will need to set the width to the parent with width: 100%

html,
body {
  width: 100%;
}

main {
  width: 100%;
}

main > section {
  width: 100%;
}

<html>
  <body>
    <main>
      <section></section>
    </main>
  </body>
</html>