I have a flexbox inside of a table header that works correctly on the first page, but loses it's container height when being repeated on subsequent pages. This causes issues when trying to align items inside the flexbox

<th>
<div class="header">
<div class="left">
<div class="left-content">Left</div>
</div>
<div class="right">
<div class="right-content">Right</div>
</div>
</div>
</th>

Header is a flexbox with left/right being flex: 1; Right has a specific height (e.g., 150px) and Left is set to align-items: center;

On page one left is center aligned as expected. However, when we get to page two, the left box is collapsed (not full height) and the text is now aligned top. We have also seen similar issues with column headers when they get repeated.

We are currently upgrading from 12.5 to 15.3 and this was previously working in 12.5. Seems to have broken somewhere in 13.x

1. input.html‎ 2.3 kB
2. output-12-5.pdf‎ 25.9 kB
3. output-15-3.pdf‎ 26.0 kB

Hi,

This issue appears to have been fixed in the latest build, if you're able to try that out. Please let us know if you still encounter any problems.

Mark

Edited 25 Jun 2024 by markbrown

Thanks Mark! It does appear to be fixed now