I am trying to make a drop-down menu work on multiple web browsers. I am placing an absolute-positioned div below an input element, which contains a scrollable list containing items that can be selected.
On Firefox, if I give that div a height (e.x. to keep in inside the viewport) and if that causes the div to have a vertical scrollbar, this causes the div to also have a useless horizontal scrollbar. I want/expect the div to know how large it should be with the items + the vertical scrollbar so that it sizes itself correctly to have enough horizontal room to display all of the items and the vertical scrollbar, without needing a horizontal scrollbar.
On Edge browser, this example works with just showing a vertical scrollbar. On Firefox, the example shows both a vertical scrollbar and the unwanted horizontal scrollbar:
<div style="position: absolute; height: 150px; overflow: auto;">
<div>SomeText0</div>
<div>SomeText1</div>
<div>SomeText2</div>
<div>SomeText3</div>
<div>SomeText4</div>
<div>SomeText5</div>
<div>SomeText6</div>
<div>SomeText7</div>
<div>SomeText8</div>
<div>SomeText9</div>
</div>I do not know the width of the items in the list beforehand so I can't give the list a fixed width.
I would like to avoid adding padding to the div on Firefox because if the div does not have a vertical scrollbar, it will have useless extra space on the right. It also looks strange if the items don't extend to the full width of the div.
