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.
*, *::before, *::after {
box-sizing: border-box;
}
#popup {
box-shadow: 0 0 12px rgba(0,0,0,.6);
position: relative;
overflow: visible;
text-align: center;
padding: 1em;
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%;
}
#popup img {
width: 100%;
vertical-align: top;
height: 100%;
max-width: max-content;
}
.okBtn {
text-align: center;
}<div id="popup">
<div><h2 class="dialogTitle"><span>Title of the Dialog</span></h2></div>
<div class="dialogOptions">
<div class="ui-radio">
<label class="ui-btn">
<img src="https://placehold.co/400x600" class="item">
</label>
</div>
<div class="ui-radio">
<label class="ui-btn">
<img src="https://placehold.co/400x600" class="item">
</label>
</div>
</div>
<div class="okBtn">
<div class="ui-btn">
<input class="button" type="button" value="OK" id="btn_ok">
</div>
</div>
</div>similar in 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.
A workaround I've found is to set an explicit height on the options div equal to the relative height that I want, and make the popup div display: block. This works for both Chrome and Firefox but somehow the options in the code snippet below aren't getting centered like they do in my real use case. And it's not the ideal answer because I don't want to have to manually guesstimate the height remaining in the dialog that should be filled by the options div.
*, *::before, *::after {
box-sizing: border-box;
}
#popup {
box-shadow: 0 0 12px rgba(0,0,0,.6);
position: relative;
overflow: visible;
text-align: center;
padding: 1em;
max-width: 700px;
max-height: 400px;
height: 400px;
display: block;
}
#popup .dialogOptions {
display: flex;
height: calc(100% - 77px);
}
.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%;
}
#popup img {
width: 100%;
vertical-align: top;
height: 100%;
max-width: max-content;
}
.okBtn {
text-align: center;
}<div id="popup">
<div><h2 class="dialogTitle"><span>Title of the Dialog</span></h2></div>
<div class="dialogOptions">
<div class="ui-radio">
<label class="ui-btn">
<img src="https://placehold.co/400x600" class="item">
</label>
</div>
<div class="ui-radio">
<label class="ui-btn">
<img src="https://placehold.co/400x600" class="item">
</label>
</div>
</div>
<div class="okBtn">
<div class="ui-btn">
<input class="button" type="button" value="OK" id="btn_ok">
</div>
</div>
</div>