One day I was just playing around with the select box and I came to a situation where the browser window was smaller than the select box's width and when you open the dropdown the select box options just moves right out of the whole browser window to let you see the options.

P.S.: You need to re-size the browser in order to see what I am talking about.

The fiddle to check it out: https://fiddle.jshell.net/kushal812/zkzrhoff/2/

Also when you apply the width to the select box then the dropdown opens on the left to accommodate the text (this works only on Chrome).

Just trying to share this and get some of your views on it.

I know that it might not be a bug on the part of the browser or have been implemented in this way purposefully.

Have tested it on desktop Chrome 42 and Firefox 37

Ok so my views:

1) The browser should calculate the width of the dropdown before opening it and accordingly should open it on the left or right but I am guessing the default is to open it on right.

2) The browser should open the dropdown with the width of the selectbox and use ellipsis to take the care of the extra text and show the whole text on hover.

Hope to hear your views too!