Hi again,

we are in the process of evaluating upgrading to Prince 13.1, looks awesome so far. Great work! However, we have run into a flexbox issue, which prevents us from (upgrading and) rolling out the new version.

In a flexbox container, laid out in column direction, with an image having the attribute 'height: auto' set, the following text of a paragraph will overlap with the image.

CSS:

.image-box {
	display: flex;
	flex-direction: column;
	border: 1px solid #ccc;
	page-break-inside: avoid;
}
img {
	width: 100%;
	height: auto;
}

HTML:

  <div class="content">
  	<div class="image-box">
  	  <div class="header">
  	  	<h2>Headline</h2>
  	  </div>
  	  <div class="image-wrapper">
  	  	<img src="1280px-Ansberg_Veitskapelle_1060027-PSD.jpg" alt="Pilgrimage church St. Veit">
  	  </div>
  	  <p>Catholic branch and pilgrimage church St. Veit on the Ansberg near Ebensfeld in Upper Franconia</p>
  	</div>
  <div>

We are using similar elements in a 2 column layout and want the images always to scale to full width of a column and adapt the height accordingly. It appears as if the height of the image is calculated incorrectly.

I have attached both the source and output files.

Keep up the great work!

John

1. 1280px-Ansberg_Veitskapelle_1060027-PSD.jpg‎ 16.6 kB ‎
   Image
2. flexbox-test.html‎ 0.7 kB ‎
   HTML
3. flexbox-test.pdf‎ 36.0 kB ‎
   output PDF

Edited 10 Jan 2020 by John

Thanks, we will investigate this issue. I suspect the percentage width is being evaluated as zero at some point and it's throwing off the height calculation, so you can workaround the problem by specifying an absolute width.

Hello Mike,

thanks a lot for the quick fix. It works and I can continue evaluating the upgrade!

Greetings,
John

Just wanted to chime in that I have also hit this issue in 13.5 and 14.2 where an image with width: 100% ends up not taking up any space in the layout and following text overlaps it. This was working in 12.5. Switching from width: 100% to width: 10in (in my case) does fix it.

The latest build includes some improvements to layout that address the overlap issue and should help in this case. Please let us know if you're still seeing any problems.