Flexbox wkhtmltopdf Rendering Issue

Question

I have a page that I am turning into a pdf with wkhtmltopdf. I have a 3 column layout and it works well in Chrome but the pdf is incorrectly generated. Is there an alternative to flexbox that would give the same view or a way to make flexbox work in wkhtmltopdf? Modernizr did not help. Thanks.

HTML:

<div class="header">
  <div id="name" class="center">
    <h2>
      Centered Text
    </h2>
  </div>
  <div id="links" class="left">
    <h3>
    Left Line 1
    <br>
    Left Line 2
    </h3>
  </div>
  <div id="contact" class="right">
    <h3>
    Right Line 1
    <br>
    Right Line 2
    </h3>
  </div>
</div>
</div class="clear"></div>

CSS:

.header {
  margin-top: 0;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}

.center {
  order: 2;
  text-align: center;
}

.left {
  order: 1;
  float: left;
  text-align: left;
}

.right {
  order: 3;
  float: right;
  text-align: right;
}

.clear:before,
.clear:after {
  flex-basis: 0;
  order: 1;
}

.clear {
  clear: both;
}

Answer 1

wkhtmltopdf uses an old version of WebKit and so you must use the original Flexbox spec, which is nowhere near as powerful but can still do some of the same effects.

Note, also, that you'll have to prefix lots of properties with -webkit-.

Answer 2

This specific comment in that issue brings a solution that worked for me: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522#issuecomment-848651693

"to make work flex on wkhtmltopdf you need to use display: -webkit-box; for flex and -webkit-box-pack: justify; for justify-content: space-between;. So we should use old flex syntax"