Hi,

A document I'm working on contains accounting transactions. A transaction is made up of five columns (the debit account, the debit amount, the divider, the credit account and credit amount). Each column may have multiple lines, which should line up.

So I decided to use Flexbox for this for simplicity. Each column of the transaction gets its own element, which are then layouted as flex items in a flex container. I have attached a broken down HTML file of this implementation to this post.

If I only use one line per column, it all works just fine. But unfortunately the output breaks once a column has multiple lines. Sometimes (not sure when exactly) the flex item gets displayed wider than it needs to be, which breaks the layout as the columns of text no longer line up correctly.

The attached PDF file was rendered using Prince 12 on macOS. Let me know if you need any further information to debug this.

Cheers,
Lukas

1. flexbox-bug.html‎ 1.1 kB ‎
   Input file
2. flexbox-bug.pdf‎ 33.1 kB ‎
   Output file (rendered with v12 on macOS)

That's very mysterious, as the text is sized correctly inside a float. I will take a look into it - thanks for the report!

The extra space is actually a margin on the <br> element caused by this rule:

.transaction :not(:last-child) {
    margin-right: 0.5em;
}

I'm not actually sure what the correct behaviour is when a <br> element is styled. Chrome and Firefox don't show anything in this case, although in IE and Edge you can see the unwanted space. I think your best course would be to change the rule so it doesn't apply to <br> (e.g., by adding '>' after '.transaction').

Thank you very much for your reply. I wouldn't have thought that that's the issue, but now I know.