I have a "popup" dialog-like container meant to prompt the user to choose one of two options. The dialog is meant to be fully on-screen, and the options are images that are taller than wide, so height will be the constraining dimension.

I've been trying to get the images to sit next to each other in the same row, but either they are left too tall and overflow the dialog (constrained by parent width), or they are properly constrained by parent height, but the "row" div then has extra whitespace which appears to be exactly the width we would have had if the images were constrained by width instead of height.

jsfiddle with example heights and placeholder images

What I'd like is for the dialog height to determine the sizes of the children, but then the children's width is what should determine the full dialog width.

I had something working in webkit (dialog fit to images that fit to dialog height) that wasn't working in Firefox (images not constrained by height), and in jsfiddle it's doing something different (images constrained but dialog has extra whitespace. Is there something I'm doing wrong with max-width or height: 100%? I've double-checked other questions that taught me that putting an explicit height: 600px (e.g.) on the top-level container is necessary for height: 100% to work but that doesn't work the same way for the two browsers I've tested so far.

I'd like something that works consistently, even if I have to use something like justify-items: space-between on the row as a compromise to make the extra space look intentional.