Wktmtopdf is not rendering flexbox properly

user_9422215 0
Viewed 478

I'm trying to convert my HTML page to PDF using wkhtmltopdf. The CSS is working completely fine when I'm rendering in the browser. It is using flex-box. I know flex-box doesn't work as expected and we have to use webkit for that purpose.

Result of PDF conversion (Faulty CSS) Result of PDF conversion

Actual HTML page with CSS working fine. Actual HTML page with CSS working fine.

CSS for the div section

display: -webkit-flex;
  display: flex;
  margin: 4px 0 0 0;
  justify-content: flex-start;
  flex-wrap: wrap;
 -webkit-box-flex: 1;
 -webkit-flex-wrap: wrap;

Can anyone help with Flexbox mystery?

wkhtmltopdf css html
1 Answers
<div class="flexing-container">
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
    <span class="flexing-items">12345</span>
</div>

//css
.flexing-container{
width: 300px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
position: static;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.flexing-items{
margin: 4px 0 0 0;
}
user_184929060
Related