I'm trying to do pagination after a full page div container. Just like loading an introductory page, if you scroll down you can enter a kind of navigation center. I feel like this might be a chrome issue, but the page break item doesn't work in Edge either.
I want to break the page after closing the tab in <div class="pagebreak">. The div contains a background, a subtitle, and a large title, all of which fill (and should fill) a complete page. After that I want to force open a new page so you have to scroll down regardless of screen size.
<body>
<div>
<div class="pagebreak">
<div class="nav">
<nav>
<div class="navitem">
<a href="#webprogrammierung">Webprogrammierung</a>
<a class="name">Niclas Kusenbach</a>
<a href="#verteilteSysteme">Verteilte Systeme</a>
</div>
</nav>
</div>
<div class="container">
<div class="centered">
<h1>Mein Portfolio.</h1>
<h2>Entwicklung verteilter Systeme</h2>
</div>
</div>
</div>
<div class="uebersicht">
<div id="webprogrammierung">
<h3>Webprogrammierung</h3>
<a>Vorlesung 1</a>
<a>Vorlesung 2</a>
<a>Vorlesung 3</a>
<a>Vorlesung 4</a>
<a>Vorlesung 5</a>
<a>Vorlesung 6</a>
<a>Vorlesung 7</a>
</div>
<div id="verteilteSysteme">
<h3>Verteilte Systeme</h3>
</div>
</div>
</div>
</body>
.uebersicht {
display: block;
page-break-before: always;
float: none;
}
.pagebreak {
page-break-after: always;
page-break-inside: avoid;
} 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I hope I understand correctly and this example will be helpful to you
Try this CSS
html, body { width: 100%; height: 100%; margin: 0; } .wrapper { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; } .first { width: 100%; background-color: red; flex: 0 0 100%; } .second { width: 100%; background-color: blue; flex: 0 0 100%; }and try this html