Wkhtmltopdf - длинный div разбивает страницу

Question

У меня есть дизайн, в котором есть длинный DIV, который разбивает PDF при генерации. Контент переходит на следующую страницу и отображает второй блок первой страницы пустым!

Вот созданный PDF: Ссылка PDF

Это CSS:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body { 
  margin: 0; font-size: 13px;
}
td div, th div, div, .vessel, .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .series {
  page-break-inside: avoid !important;
}
.vessel {
  margin-right: auto;
  margin-left: auto;
}
.series {
  margin-left: -15px;
  margin-right: -15px;
  clear: both;
}
[class*="column-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
.column-1 {width: 8.33%;}
.column-2 {width: 16.66%;}
.column-3 {width: 25%;}
.column-4 {width: 33.33%;}
.column-5 {width: 41.66%;}
.column-6 {width: 50.00%;}
.column-7 {width: 58.33%;}
.column-8 {width: 66.66%;}
.column-9 {width: 75%;}
.column-10 {width: 83.33%;}
.column-11 {width: 91.66%;}
.column-12 {width: 100%;}

HTML версия:

  <div class="vessel">
    <div class="series">
      <div class="column-8">
        John Baptist
      </div>
      <div class="column-4">
        <img src="images/profile.png" class="profile__pic">
      </div>
    </div>
    <div class="series">
      <div class="column-7">
        Text here which is on repeat-mode.
        Text here which is on repeat-mode.
        Text here which is on repeat-mode.
        ....more text here
      </div>
      <div class="column-5">
        hello world
      </div>
    </div>
  </div>

Кто-нибудь может направить меня туда, где я иду не так?