Forum How do I...?

Use flexbox to vertically distribute items in limited space?

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.png154.8 kB
    screenshot of flexbox working in firefox
  2. prince pdf screenshot.png817.8 kB
    screenshot of flexbox not working in pdf
  3. prince vertical flex bork.html0.5 kB
    source html
  4. prince vertical flex bork.pdf129.8 kB
    outputted pdf

Edited 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.