I have a simple page where body has display: flex. There is "fixed" header on top and scrollable main content with flex: 1 to fill the rest of the page. When I scroll down and click on the link to navigate away from page, when I return back scroll position is not preserved and I see page from the top. In Firefox the scroll is preserved. There is no JS involved.
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: silver;
}
main {
flex: 1;
overflow-y: scroll;
}<header>
This is header
</header>
<main>
Scroll down, then click link<br>
1<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
2<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
3<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
4<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
5<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
</main>You may not be able to properly test it here, so I put the same demo on a stand alone page: https://ghost.sk/chrome-flexbox-scroll-not-preserved-on-back-button/index.html