I've got some number inputs in a flex layout which are not sizing as expected in Firefox, and I don't understand why.
As you can see, the XP row doesn't overflow its parent in Chrome (no horizontal scrolling), but it has significant overflow in Firefox (with horizontal scrolling), on top of the number inputs overlapping neighboring label texts.
The relevant HTML & CSS from the page is:
/**
* The ".charsheet" prefix on each rule is automatically added
*/
.charsheet .sheet-flexbox-h input[type=number] {
flex: 1 1 40%;
margin-left: 5px;
}
.charsheet .sheet-flexbox-inline > label > span {
white-space: nowrap;
font-size: 89%;
}
.charsheet .sheet-flexbox-h > label {
width: 100%;
display: flex;
flex-direction: row;
}
.charsheet .sheet-flexbox-inline {
display: inline-flex;
width: 100%;
}
.charsheet .sheet-3colrow .sheet-2col:last-child {
width: calc(66% - 5px);
}
.charsheet .sheet-body {
display: block;
overflow-x: visible;
overflow-y: scroll;
position: relative;
flex: 1 1 auto;
}
.charsheet .sheet-content {
height: 100%;
display: flex;
flex-direction: column;
}
.charsheet {
position: absolute;
left: 0;
height: calc(100% - 70px);
width: calc(100% - 12px);
}
/**
* CSS rules below are on the page, but not editable by me
*/
.ui-dialog .charsheet input[type=number] {
width: 3.5em;
}
.ui-dialog .charsheet input {
box-sizing: border-box;
}
<!-- I can only modify the descendants of .charsheet -->
<div class="charsheet tab-pane lang-en" style="display: block;">
<div class="sheet-content">
<div class="sheet-body">
<!-- ... -->
<div class="sheet-3colrow">
<div class="sheet-col"><!-- ... --></div>
<div class="sheet-2col">
<!-- ... -->
<div class="sheet-flexbox-h sheet-flexbox-inline">
<label>
<span data-i18n="current-experience-points">Current XP:</span>
<input type="number" name="attr_xp">
</label>
<label>
<span data-i18n="total-experience-points">Total XP:</span>
<input type="number" name="attr_xp_max">
</label>
<!-- etc... -->
</div><!-- /sheet-flexbox-h -->
<!-- ... -->
</div><!-- /sheet-2col -->
</div><!-- /sheet-3colrow -->
<!-- ... -->
</div><!-- /sheet-body -->
<div class="sheet-footer"><!-- ... --></div>
</div><!-- /sheet-content -->
</div><!-- /charsheet -->
My full CSS and HTML can be found at Roll20/roll20-character-sheets on GitHub. The full CSS that I can't edit can be found live (minified) at Roll20.net
Update: I've created a fiddle to demonstrate the problem: https://jsfiddle.net/Lithl/az1njzn8/
Fiddle in Chrome, fiddle in Firefox
See Question&Answers more detail:os