CSS: Setting width to 100vw will cause horizontal overflow

The problem

Recently, I had to extend a div element to the maximum width to right for a design effect. In my case, the element had to overflow its parent and extend itself at the end of the horizontal viewport.

As an idea, the following code can be a good HTML example:

<div class="parent">
  <div class="child">
  </div>
  <div class="child">random text</div>
</div>

So, with width: 100vw on the parent and background-color on the child, the element overflowed outside of my body and html elements.

The solution

I had to set overflow-x: hidden; to html and body.

html, body{
   overflow-x: hidden;
}

Other solutions and resources

• https://www.examplefiles.net/cs/54741
• https://destroytoday.com/blog/100vw-and-the-horizontal-overflow-you-probably-didnt-know-about