[Explanation & Solution] Horizontal scroll bar when using 100vw

Community resources General
1

Hey! ho! Let’s go!

I saw few posts regarding this topic, so:

  • When 100vw is used, on a webpage longer then 100vh a horizontal scroll bar appears and a whitespace to the side of the 100vw element is created.
  • This is a general CSS behaviour and not something specific to Webflow.
  • As wf4 explains here:

“…scrollbars will be included in the vw so the horizontal scroll will be added to allow you to see under the vertical scroll.
When you only have 1 box, it is 100% wide x 100% tall. Once you add 2, its 100% wide x 200% tall, therefore triggering the vertical scrollbar. As the vertical scrollbar is triggered, that then triggers the horizontal scrollbar.”

  • The simplest solution is- adding max-width:100% to the element with width:100vw
  • Another solution is to use overflow:hidden on a parent element (This solution requires other properties and might not fit in all cases)

Hope it helps.
:webflow_heart:

12 Likes
2

Hey @avivtech

Thanks for sharing! :webflow_heart:

1 Like
3

Just spent ages trying to solve this issue, eventually found this topic, thanks so much!

1 Like
5

Thank you so much! I couldn’t use overflow:hidden because it broke my interaction, but max-width:100% did the trick. AMAZING :slight_smile: