Android浏览器中position: fixed定位异常问题求助

我尝试将宽度为100vw的header固定在宽度1024px、带有横向滚动的页面左上角，使用position: fixed和left: 0实现该效果。该设置在iOS移动端浏览器及桌面浏览器（将窗口缩小于1024px时）表现正常，但在Android浏览器及Chrome开发者工具设备模拟中，header元素会随内容横向滚动。

代码示例 #

HTML代码 #

<!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>

CSS代码 #

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;
}

补充说明 #

• 曾尝试通过给meta viewport设置user-scalable=no解决此问题，但该方案针对旧浏览器版本，且不想禁用缩放功能，因此无法使用。
• 无法通过StackOverflow的代码片段复现此问题，因为页面会自动添加meta设置minimum-scale=1.0，这也会“修复”该问题。

内容的提问来源于stack exchange，提问作者Victor Oliveira Arêas