How to get word processor like column-orientated "text"-flow via HTML+CSS?

To find a meaningful title was difficult for me.

I try to force my HTML document to have same text flow behavior like typical word processors have.

Please take a look at the following container flow:

   1   2   3
|-------------|
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
|-------------|
   4   5  (6)
|-------------|
| ~~~ ~~~     |
| ~~~ ~~~     |
| ~~~ ~~~     |
| ~~~ ~~~     |
| ~~~         |
| ~~~         |
| ~~~         |
| ~~~         |
|-------------|

The three tildes mean a rendered container element and the numbers show the order of content-flow.

The following HTML/CSS code was a first try with a very unsatisfying result.

html { 
  margin: 0;
  background-color: lightblue;
}
body {
  display: inline-block;
  margin: 0;
  background-color: coral;
}
p {
  width: 33%;
}
.din-a7 {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 74mm;
  height: 105mm;
}
.print-margin-10mm {
  padding: 10mm;
}

<div class="din-a7 print-margin-10mm two-column-text-flow">
  <p>01 content</p>
  <p>02 content</p>
  <p>03 content</p>
  <p>04 content</p>
  <p>05 content</p>
  <p>06 content</p>
  <p>07 content</p>
  <p>08 content</p>
  <p>09 content</p>
  <p>10 content</p>
  <p>11 content</p>
  <p>12 content</p>
  <p>13 content</p>
  <p>14 content</p>
  <p>15 content</p>
  <p>16 content</p>
  <p>17 content</p>
  <p>18 content</p>
  <p>19 content</p>
  <p>20 content</p>
  <p>21 content</p>
  <p>22 content</p>
  <p>23 content</p>
  <p>24 content</p>
  <p>25 content</p>
  <p>26 content</p>
  <p>27 content</p>
  <p>28 content</p>
  <p>29 content</p>
  <p>30 content</p>
  <p>31 content</p>
  <p>32 content</p>
  <p>33 content</p>
  <p>34 content</p>
  <p>35 content</p>
  <p>36 content</p>
  <p>37 content</p>
</div>

I have tried to use column-count but it works only with simple text instead of containers and also the wrap to the next "page" doesn't work.

Is this possible with simple HTML/CSS anyway?

You can create a container having column-count: 3 to create three columns with continuous, automatic text flow.

But since there are no pages in HTML, there is no second page to continue.

And it's not possible to have text content flow dynamically from one container (div, span, p, whatever) into another one (i.e. the way text flows from page 1 to page 2 in a Word document or similar).