Using Flex/CSS with wkhtmltopdf

Question

I've successfully created a list using the following answer with flexbox on my HTML page How to display 3 items per row in flexbox?

I have a need to create a PDF with this data and I'm using wkhtmltopdf (https://wkhtmltopdf.org/) which also works fine however the PDF generated has all my List Items in 1 long column instead of 3 per row.

Looks like the CSS is not being processed when the PDF generation is happening any insight is appreciated.

Answer 1

This worked for me :

.row {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    -webkit-box-pack: center; /* wkhtmltopdf uses this one */
    justify-content: center;
}

.row > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.row > div:last-child {
    margin-right: 0;
}

See https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 for more informations.