Css 介质打印中断：避免与以下 div 重叠

.main-content, .section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.section {
  border: 2px solid blue;
}

.sub-content {
  margin: 2px;
  border: 2px solid darkorange;
}

@media print {
  p {
    break-inside: avoid;
  }
}

<div class="main-content">
  <button onclick="window.print();">Print</button>
  <div class="section top">
    Top
  </div>
  <div class="section middle">
    Middle
    <div class="sub-content" style="height: 300px">
      sub-content 1
    </div>
    <div class="sub-content big-sub-content">
      sub-content 2
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus diam at sem pharetra, eu imperdiet turpis pellentesque. Nulla ut nisi sapien. Donec sit amet auctor massa, non congue elit. Praesent ultricies posuere eros eu congue. Suspendisse aliquet hendrerit dictum. Duis nec laoreet dui. Duis tempor mi a massa maximus bibendum. Phasellus ornare bibendum dui, ut ornare ex sagittis in. Suspendisse dignissim magna quis ligula auctor, in malesuada felis tincidunt. Morbi rutrum augue vulputate, sollicitudin ipsum id, imperdiet felis. Sed nec orci fringilla, porta dui vitae, placerat velit. Morbi lacus elit, ornare id tempus in, ornare non odio. Donec ultrices euismod magna, ut vehicula tortor pulvinar in. Morbi maximus, libero vitae convallis sodales, dui neque tempor urna, at faucibus quam libero sit amet urna.

Vivamus ut vulputate odio. Duis bibendum sed enim non posuere. Donec lobortis, sapien non hendrerit dapibus, nibh leo auctor lorem, id facilisis eros tellus a metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget porta sem, sit amet gravida augue. Cras vulputate felis vitae ultrices malesuada. Aliquam nulla metus, dapibus et tempus id, laoreet ut nunc. Nam diam nunc, blandit vel posuere vel, ultricies ac orci. Maecenas neque eros, euismod id pellentesque vel, eleifend quis felis. Nulla tempus dolor a turpis pellentesque, non fringilla massa egestas. Praesent ullamcorper sem ut felis dignissim, nec condimentum nisl cursus. Aliquam erat volutpat. Maecenas at felis egestas mi egestas lacinia et fringilla ligula.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed congue vitae enim fringilla tempor. Nulla eu lectus sit amet tellus commodo porta vitae in nisl. Nulla tincidunt placerat lorem, iaculis eleifend augue maximus sed. Donec tincidunt augue sed pharetra pretium. Phasellus varius faucibus mauris, eget convallis metus pellentesque nec. Vivamus elementum, mauris ut posuere porta, ipsum odio posuere velit, et molestie urna tortor id nunc. Nullam ac tortor interdum, suscipit diam id, rutrum felis.

Nulla condimentum libero vel sem aliquam porttitor. Aenean posuere imperdiet ex at bibendum. Donec sed fermentum ligula. Sed et viverra nulla, vitae tempus nulla. Nulla consequat mi ut nisl dictum, consequat pharetra ex posuere. Donec aliquam eleifend enim, rhoncus tristique lacus mattis gravida. Nullam ligula ante, aliquet sit amet aliquet a, tempor at erat. Suspendisse et magna quis ligula ultrices vestibulum maximus vel lorem.

Quisque iaculis luctus velit fringilla congue. Sed lacinia neque non congue eleifend. In nec libero nibh. Aliquam condimentum sed magna ac scelerisque. Sed sit amet elementum massa, sed placerat nunc. Donec congue magna commodo metus dapibus efficitur. Etiam vel libero non nulla faucibus laoreet et ut velit. Proin eget quam ante. Nam nec molestie mauris, eu vehicula quam. Nunc non arcu elit. Nam felis magna, iaculis eu cursus sit amet, posuere non orci. Fusce convallis, eros vitae laoreet sodales, lacus tortor accumsan dui, commodo maximus justo eros vitae velit. Aliquam ornare malesuada nibh, nec ornare enim tincidunt id. Pellentesque pharetra venenatis hendrerit.

Etiam ut interdum arcu. Sed venenatis, augue ac feugiat vehicula, nibh ex tristique magna, a placerat ex lacus vitae libero. Duis nec libero nec nibh pharetra scelerisque. In feugiat, ligula et molestie luctus, diam enim lacinia leo, eget interdum lacus ligula at augue. Suspendisse potenti. Suspendisse molestie odio elit, condimentum viverra orci vehicula eu. Donec id nisl quis metus feugiat condimentum. Integer tincidunt, nibh eu semper dapibus, urna nulla finibus lectus, sed auctor nisl massa nec massa.
      </p>
    </div>
    <div class="sub-content" style="height: 100px">
      sub-content 3
    </div>
  </div>
  <div class="section bottom">
    Bottom
  </div>
</div>