Determine div size (height) when filling content (from database)

I want to determine the height of a div when filling content (from a database). If the height of the exeed div is 800px, then draw a new div as a new wrapper for the content and fill in the remaining content inside. The illustration is as follows:

A single content wrapper created with height (varies), let, for example, 2500 px (may be more)

<div id="content-wrapper>
p 1
p 2
p 3
p 4
p 5
p 6
p 8
p 9
</div>

I want to split it into 800 pixels each so that it creates multiple div containers (content wrapper) as shown below.

<div id="content-wrapper>
p 1
part of p 2

[reached 800px here] --> break 1, print </div><div id="content-wrapper">

remaining part of p2...
p 3
p 4
p 5

[reached 800px here] --> break 2, print </div><div id="content-wrapper">

remaining part of p 5
p 6
p 7
p 8

[reached 800px here] --> break 3, print </div><div id="content-wrapper">
p 9

</div>

In the above example, when downloading content, it occurs 3 times with a height of 800 px. Thus, 4 content wrappers will be printed on the page.

How to do the trick with jQuery and css?

Thanks in advance.