Могу ли я ограничить высоту дочернего элемента в зависимости от родителя, одновременно ограничивая ширину родителя в зав ⇐ CSS

[Anonymous]

У меня есть контейнер, похожий на «всплывающее окно», предназначенный для того, чтобы предложить пользователю выбрать один из двух вариантов. Диалоговое окно должно полностью отображаться на экране, а параметры — это изображения, высота которых превышает ширину, поэтому ограничивающим размером будет высота.
Я пытался заставить изображения располагаться рядом друг с другом в одном ряду, но либо они остались слишком высокими и переполнили диалоговое окно (ограничено родительской шириной), либо они правильно ограничены родительской высотой, но тогда в блоке div «row» появилось дополнительное пробельное пространство, которое, по-видимому, было бы точно такой же шириной, как если бы изображения были ограничены по ширине, а не по высоте.

Код: Выделить всё

*, *::before, *::after {
box-sizing: border-box;
}

#popup {
box-shadow: 0 0 12px rgba(0,0,0,.6);
position: relative;
overflow: visible;
text-align: center;
max-width: 700px;
max-height: 400px;

height: 400px;
display: grid;
}

#popup .dialogOptions {
display: flex;
overflow: auto;
}

.ui-checkbox, .ui-radio {
margin: .5em 0;
position: relative;
}

.ui-radio .ui-btn {
padding: .7em 1em;
position: relative;
padding-left: 2.5em;
display: block;
border-width: 1px;
border-style: solid;
margin: 0;
text-align: left;
max-width: max-content;
height: 100%;
}

#game img, #popup img {
width: 100%;
vertical-align: top;
}
#popup img {
height: 100%;
max-width: max-content;
}

.okBtn {
text-align: center;
}

Код: Выделить всё

Title of the Dialog



[img]https://placehold.co/400x600[/img]



[img]https://placehold.co/400x600[/img]

аналогично в jsfiddle с примерами высоты и изображениями-заполнителями
Я хотел бы, чтобы высота диалога определяла размеры дочерних элементов, но тогда ширина дочерних элементов должна определять полную ширину диалога.
У меня было что-то работающее в webkit (диалоговое окно, подходящее к изображениям, соответствующим высоте диалога), которое не работал в Firefox (изображения не ограничены по высоте), а в jsfiddle он делает что-то другое (изображения ограничены, но в диалоговом окне есть лишние пробелы. Что-то я делаю неправильно с максимальной шириной или высотой: 100%? Я дважды проверил другие вопросы, которые научили меня, что для высоты необходимо указать явную высоту: 600 пикселей (например) в контейнере верхнего уровня: 100% работает, но это не работает одинаково для двух браузеров, которые я тестировал до сих пор.
Мне бы хотелось, чтобы что-то работало стабильно, даже если мне придется использовать что-то вроде justify-items: space-between в строке в качестве компромисса, чтобы дополнительное пространство выглядело намеренно.

Подробнее здесь: https://stackoverflow.com/questions/798 ... nt-width-b