I am trying to make a header (with a width of 100vw) fixed in the top-left of a page (with a width of 1024px) that contains a horizontal scroll.
I am using position: fixed and left: 0 to achieve it. It works as expected on iOS mobile browsers and desktop browsers (by resizing the window to a width less than 1024px). However, on Android browsers and on Desktop Chrome devtools device emulation, the header element scrolls with the content horizontally.
You can see the code snippet bellow, or open it on Codepen, use the preview link to test on mobile devices.
Obs: I was able to fix this issue by setting user-scalable=no to meta viewport. This workaround has been used to fix this issue in the past, in old browser versions. However, it should not be necessary in the current versions. Also, I can't use this solution because I don't want to disable zooming.
body { padding: 0; margin: 0; } .header-container { height: 60px; width: 100%; } .header { width: 100vw; height: 60px; background-color: #add8e6; position: fixed; left: 0; display: flex; align-items: center; } .content { width: 1024px; height: 400px; background-color: gray; border: 2px dashed red; display: flex; align-items: center; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML + CSS</title> </head> <body> <div class="header-container"> <div class="header">Header</div> </div> <div class="content">Content</div> </body> </html>IMPORTANT NOTE: it is not possible to reproduce the issue when running the code snippet from StackOverflow, because the page will receive the meta setting minimum-scale=1.0, which also "fixes" the problem.
