scrollbar - Listbox Option is trimmed when in focus and scrolling -

i'm trying build listbox has width smaller longest text length. when doing have scrollbar able see whole text. problem appears when select option , scroll right, text seems trimmed somehow. happens on chrome. (on ie , firefox i'm not able see scroll.) here jsfiddle that: jsfiddle

here code html:

    <select name="sets" id='sele' size=4>          <option value="general">happy holiday</option>          <option value="garden">garden</option>          <option value="lunch">lunch</option>          <option value="nice day">a nice day out friend on     beach</option>     </select> 

and css:

   #sele {         width: 100px;          height: 100px;          overflow: auto;     }     option {         overflow: visible;     }