Я пытаюсь заставить разрыв страницы перейти к печатной версии моей страницы. Я делаю это путем стилизации разделов, которые я хочу разбить на новую страницу. Проблема у меня заключается в том, что при печати пустая страница вставляется между элементами. Таким образом, разрыв страницы работает, но добавляется дополнительная пустая страница между ними.
Например, приведенный ниже код должен печатать две страницы, но на самом деле он печатает всего 4 (две нужные мне и две пустые страницы).
вот полный html код страницы в том числе css ниже;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>DEMO</title>
<style type="text/css">
/* JUST IMPORTS , RESTS & MINIMAL DEFAULTS */
/* CSS reset */
* {
padding: 0;
margin: 0;
}
.container-flex-column {
display: flex;
flex-direction: column;
}
.page-width-mobi {
min-width: 1072px;
max-width: 1072px;
}
.new-page {
page-break-before: always;
box-sizing: border-box;
border-bottom: solid lightgray 20px;
}
.page-size-mobi {
min-height: 1505px;
max-height: 1505px;
min-width: 1072px;
max-width: 1072px;
}
</style>
</head>
<body>
<main class="container-flex-columm page-width-mobi">
<section class="new-page page-size-mobi">
<h1>Page 1</h1>
</section>
<section class="new-page page-size-mobi">
<h1>Page 2</h1>
</section>
</main>
</body>
</html>