I have a container whose height I have set and it contains an image and a caption. I want to let the image and caption take up all the space they need inside that container.
I thought flexbox would be the right tool, but the contents of the flexbox always overflow. I can get it to work with a web browser like Firefox though. Check out the attached screenshots, the outputted PDF, and source HTML.

Is this a bug in Prince? It seems pretty basic flexbox: I have two items inside a container that I want to fill the space, but can't get it to work. Am I doing something wrong?

1. firefox screenshot.png‎ 154.8 kB ‎
   screenshot of flexbox working in firefox
2. prince pdf screenshot.png‎ 817.8 kB ‎
   screenshot of flexbox not working in pdf
3. prince vertical flex bork.html‎ 0.5 kB ‎
   source html
4. prince vertical flex bork.pdf‎ 129.8 kB ‎
   outputted pdf

Edited 15 Feb 2022 by thespacecamel

It seems that when I set `img{height:100%;max-height:100%;}` that the browser has it occupy 100% of the container, whereas Prince has it occupy 100% of the page height.

Prince doesn't support separate overflow-x and overflow-y properties. If you change this to just overflow then it should work as expected.

Note that the percentage heights are a red herring in this case. If you remove the overflow declaration that generates the warning from Prince then browsers produce the same result.

Ahhh thanks. I didn't notice overflow-x and overflow weren't valid in Prince.
Ya once I switch the CSS to just "overflow" then it does work as hoped.