Make page for print

Questions
1

I am devloping a page with list of users in our sistem. But I can’t to print all these page, broser see only first page. I found problem in framework7, but don’t know how I can fix it.

It’s my code:

<template>
<f7-page name="Report607"
           class="report-607-page"
           :page-content="false">
    <!--PAGE-CONTENT-->
    <f7-page-content class="report-607-content">
      <div class="display-flex workspace"
           :style="Styles.workspace">
        <div class="width-100 text-align-right text-italic"
             :style="Styles.header.timestamp">
          {{ new Date().toLocaleDateString() }}
          {{ new Date().toLocaleTimeString().slice(0, 5) }}
        </div>
        <div class="page-title no-padding-left"
             :style="Styles.header.title">
          Сотрудники (с фото)
        </div>
        <template v-for="(User, Index) in List"
                  :key="Index">
          <div class="display-flex flex-direction-row"
               :style="Styles.workspace.card">
            <!--ФОТО-->
            <app-image :image-id="User.image"
                       :width="256"
                       :height="256"
                       class="rounded-7 card-raised"
                       :style="Styles.workspace.card.photo"/>
            <div class="display-flex justify-content-space-between flex-direction-column padding-vertical-half"
                 :style="Styles.workspace.card.info">
              <!--ФИО-->
              <div class="text-wrap text-bold"
                   :style="Styles.workspace.card.info.fio">
                {{ User.FIO }}
              </div>
              <!--ДОЛЖНОСТЬ-->
              <div class="user-position text-bold"
                   :style="Styles.workspace.card.info.position">
                {{ User.position }}
              </div>
              <!--ТЕЛЕФОН-->
              <div class="text-bold"
                   :style="Styles.workspace.card.info.phoneNumber">
                <app-phone v-if="User.mobileNumber"
                           :phone="User.mobileNumber"/>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div v-if="1===2"
           class="grid grid-cols-2">
        <pre>{{ List }}</pre>
        <pre>{{ list }}</pre>
      </div>

      <!--      <pre> {{ Styles }} </pre>-->
    </f7-page-content>
  </f7-page>
</template>

<style scoped>
.report-607-content {
  width: 210mm; /* Fixed width */
  height: 297mm; /* Fixed height */
  background-color: #d0eef4 !important; /* Light blue background color */
  border: 1px solid #ff8f8f !important; /* Optional: for visual clarity */
  /*margin: 20px; !* Optional: for spacing *!*/
}

/*
@media print {
  @page {
    size: A4
  }
}
*/
@media print {
  body {
    height: auto !important;
    margin: 0 !important;
  }
  .workspace {
    overflow: visible !important; /* Отображаем весь контент */
    height: auto !important; /* Автоматическая высота */
  }
  .report-607-content {
    overflow: visible !important;
  }
  @page {
    margin: 15mm;
    size: A4;
  }
}

.page-title {
  font-size: 7mm;
}

.workspace {
  flex-flow: row wrap;
}

.user-position {
  hyphens: auto;
}
</style>
2

It’s possibly a problem with the height of the viewport. See if you can open the data in a new window/tab (where you’re not wrapping the data in F7 code) and it should work fine. Otherwise, use code to force a taller viewport.