I have what should be a simple-to-resolve problem with a vertical scrollbar rendering on a DIV with overflow-y: auto, but rendering differently between IE and FireFox. Put simply, in IE, the scrollbar appears outside the DIV, while in FF, it is rendered within the DIV. This causes unwanted wrapping of items within the DIV in FF when the items approach the longest in the list (which are, in turn, driving the width of the DIV in the first place).
Here is a snippet of the HTML
<div class='helperList'>
<div class='helperListItem'>
<span>
Sample Data Item 1
<span class='helperItemExtraData'>
Data 1 Special Info
</span>
</span>
</div>
<div class='helperListItem'>
<span>
Sample Data Item 2
<span class='helperItemExtraData'>
Data 2 Special Info
</span>
</span>
</div>
</div>
The relevant CSS for helperList is:
div.helperList{
display: flex;
flex-direction: column;
width: auto;
overflow-y: auto;
overflow-x: hidden;
height: 300px;
}
and for helperItemExtraData:
span.helperItemExtraData{
float: right;
}
And here is a pic of the different renderings:
Firefox rendering
IE11 rendering
Now, this is part of a reusable module of list generation code that simulates a drop-down list for an autocomplete feature. The outer two DIV's (helperList, helperListItem) are autogenerated and I cannot change them. I can control the rendering of the item that goes into each helperListItem DIV. This particular item is unusual in that it holds two pieces of information, and the intent is to have the 2nd piece ("Data X Special Info") right-aligned, giving the appearance of two columns.
Mechanically, in terms of rendering a list with a vertical scrollbar, it works correctly in both IE11 and FF. However, when FF renders the list, and makes the width of the box to match the longest item, but then interposes the vertical scrollbar within the list, it then reflows the list content and breaks item(s) at or near the length of the longest item in the list. IE, conversely, puts the scrollbar outside the DIV, thus rendering the items correctly in all cases.
I need to stop the breaking/wrapping of the items in FF. What I've tried so far - and I'll admit up-front some of these are obviously reaches, and frankly I'm at the point where I'm sure I'm overlooking a simpler solution (and my eyeballs are turning to teabags at this point):
- Rendering each item with display: table-cell
- Adding a blank, 15px to the end (and then to the middle) of the item
- Programmatically adding padding-right to the box when the list's width and scroll width differ, which presumably happens in only one instance
- Eliminating the flex container/column setup
- Adding 'white-space: nowrap' to the item and to the span
A working fiddle that illustrates the difference when rendered in the two different browsers is available at:
https://jsfiddle.net/ykv3tu41/1/
If it is even possible, how might I prevent FireFox from putting that vertical scrollbar inside the list DIV, and thus inducing the breaking the items?
I believe the question posted here is dealing with a very similar (if not identical?) issue, but it has no answer.
EDIT: I am beginning to think that this may be a flexbox problem described here.
