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
Spread the love