Menu
I am seeing some strange behavior in Firefox in regards to form select fields.
Depending on viewport width, a select with, say, a width of 33.333% will sometimes have its right borders cut off.
please see this fiddle for an example: http://jsfiddle.net/pjv0adhw/
What I have is a horizontally centered parent container with an absolute width, containing a select with a fractional width, like so:
.parent {
margin: 0 auto; /* centered on viewports > 1200px */
width: 300px;
}
.select {
width: 33.333%;
}
Simplified markup:
<body>
<div class="parent">
<select class="select">
<option>cat</option>
<option>dog</option>
<option>manatee</option>
</select>
</div>
</body>
Now, on Firefox, when the viewport width is wider than 300px and the .parent element is centered, the select starts behaving weirdly.
In even viewport widths (302px, 1326px), all is well. But in odd viewport widths (301px, 1317px), the select's right border is being cut off.
I've seen this in Firefox 32-35. Other browser vendors don't seem to be affected.
Also, this happens only when the options are narrower than the select.
I'm guessing that what happens is that, if the left-over viewport width is an odd number, some calculations for the margin: auto; property are counting half-pixels and making rounding errors.
What I can't seem to grasp is how the margins on the parent can have any impact at all on its children, whose fractional width, as I understand it, should always be calculated based on the parent's absolute width of 300px.
Am I missing something fundamental about the box model here, or is this simply a bug in Firefox? Is there a known workaround for this issue that I haven't dug up yet?
On a sidenote, box-sizing: border-box; does not seem to have any effect on this behavior.
730
DEMO
This is easily solved using flexboxto resize your selects
here's a screen shot ran from firefox
HTML
<div>
<select class='flex-1'>
<option>abc</option>
<option>def</option>
</select>
<select class='flex-2'>
<option>cat</option>
<option>dog</option>
<option>manatee</option>
</select>
<span class='flex-3'></span>
</div>
CSS
* {
margin: 0;
outline: 0;
padding: 0;
}
div{
margin: 5em auto;
padding: 1em;
width: 300px;
background-color: slategray;
display: flex;
}
[class*='flex']{
flex-basis: 0;
}
.flex-1{ flex-grow: 1; }
.flex-2{ flex-grow: 2; }
.flex-3{ flex-grow: 3; }
more info about flexbox here
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
