我无法弄清楚是什么破坏了这里的滚动快照。我已经检查了许多其他关于SO的主题，但没有一个解决了这个问题。我还尝试更改父元素和子元素上的溢出、高度/宽度属性。
html,
body {
height: 100%;
width: 100%;
max-width: 100%;
}
body {
z-index: 0;
scroll-behavior: smooth;
transition: background-color 1s ease;
overflow-x: hidden;
}
main {
display: flex;
flex-direction: column;
width: 100vw;
margin: 0 auto;
overflow: scroll;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
}
section {
max-height: 100vh;
height: 100vh;
width: 90vw;
border: 1px solid red;
margin: 0 auto;
scroll-snap-align: start;
}<main dir="ltr">
<section>
<h1>content1</h1>
</section>
<section>
<h1>content2</h1>
</section>
</main>为了清楚起见，这里稍微简化了一下。主要更改是将flex-direction恢复为row，添加flex-wrap: wrap属性，并使main容器height: 100%。
在您的原始代码中，主容器只是增长到弹性项目的高度，从而触发主体上的溢出，而不是该容器上的溢出。
原始解决方案与flex-direction: row：
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
scroll-behavior: smooth;
}
main {
display: flex;
flex-wrap: wrap;
width: 100vw;
height: 100%;
overflow: auto;
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
width: 90vw;
border: 1px solid red;
margin: 0 auto;
}
main section {
scroll-snap-align: start;
}<head>
</head>
<body>
<main dir="ltr">
<section>
<h1>content1</h1>
</section>
<section>
<h1>content2</h1>
</section>
</main>
</body>
</html>编辑：
经过仔细检查，我意识到，如果您为弹性项目提供flex-basis，实际上没有必要更改弹性方向。默认情况下，flex-box 将尝试将其子项放入其自身高度内，因此您需要指定它们的起始大小。您还需要提供控制元素相对于容器大小调整大小的flex-grow和flex-shrink。
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
scroll-behavior: smooth;
}
main {
display: flex;
flex-direction: column;
width: 100vw;
height: 100%;
overflow: auto;
scroll-snap-type: y mandatory;
}
section {
flex-basis: 100vh;
flex-grow: 1;
flex-shrink: 0;
width: 90vw;
border: 1px solid red;
margin: 0 auto;
}
main section {
scroll-snap-align: start;
}<html>
<body>
<main dir="ltr">
<section>
<h1>content1</h1>
</section>
<section>
<h1>content2</h1>
</section>
</main>
</body>
</html>这是实现相同基本结果的另一种方法：容器将溢出并触发滚动行为。