Log in / Register

Forum › Bugs

Flex (column direction) wrapped content overlapping

esteban-terem
Hi. We encountered an overlapping content case that can be replicated with a basic HTML file like this (complete file attached as simple-report.html):

<html>
  <body>
      <div style="display: flex; flex-direction: column">
        <div>
          <span style="font-weight: 600; display: block; border: 1px solid blue;">Lorem Ipsum</span>
          <p>Venenatis urna ...</p>
          <p>...</p>
        </div>
        <div>
          <span style="font-weight: 600; display: block; border: 1px solid blue;">Faucibus interdum posuere</span>
          <p>Lorem ipsum ...</p>
          <p>...</p>
        </div>
      </div>
  </body>
</html>


We compared the PrinceXML output with other products and their output doesn't overlap (screenshots attached).

Is this a PrinceXML bug?

Thank you very much.

PrinceXML version 13.3 (tested on macOS and Linux).
  1. simple-report-chrome.png‎ 94.1 kB
  2. simple-report-pdfreactor.png‎ 93.9 kB
  3. simple-report-prince.png‎ 93.1 kB
  4. simple-report.html‎ 8.5 kB
markbrown
Yes, this looks like a bug. We will look into it; thanks for the report.

Mark
esteban-terem
Thank you Mark. Have you had the chance to take a look into this? Any update? Thanks again.
markbrown
Hi,

I can confirm it is a bug. We have an idea how to fix it which I will hopefully get a chance to try next week, but I can't promise anything just yet.

Mark
markbrown
There may be a couple of workarounds you can try in the meantime. For the simplified document above just removing the display:flex will get the desired result, but that may not work if you need to prevent margin collapsing. In that case you could additionally try making the inner divs into floats, with 100% width.

Hopefully this helps, although if you're still having trouble please feel free to send a more complex example.

Mark
markbrown
Hi,

Thanks for your patience. The latest build contains a partial fix for this and similar problems with column flex. Please try it out, and let us know if you're still encountering any problems.

Mark