We have "display: flex" and "flex-direction: column" set on a div that contains two paragraphs and an occasional image. The reason for the flex markup is that we always want the image first but often it is last in the content delivery so we place "order: -1" on the image so it will get rendered first. What we are seeing is that if we have a very long word (string of characters without breaks) we are able to force it to break but in so doing the "p" elements height does not get adjusted during this process in Prince thereby causing collisions between the class="message" and class="author-name" paragraphs.
This doesn't happen if the flex controls are not there and it doesn't happen in a browser. It sonly getting this behavior when it is processed in Prince. It appears as if the height and pagination is being set before or without considering how the "overflow-wrap: break-word" will effect it.
I have attached screen captures, the XHTML file and PDF
This doesn't happen if the flex controls are not there and it doesn't happen in a browser. It sonly getting this behavior when it is processed in Prince. It appears as if the height and pagination is being set before or without considering how the "overflow-wrap: break-word" will effect it.
I have attached screen captures, the XHTML file and PDF