在焦点和滚动时修剪列表框选项

Question

我正在尝试构建一个宽度小于最长文本长度的列表框。这样做时，我有一个滚动条，可以看到整个文本。 当我选择一个选项并向右滚动时，会出现问题 文本似乎以某种方式被修剪。 这种情况发生在Chrome上。 （在IE和Firefox上，我无法看到滚动。） 这是JSFiddle：JSFiddle

这是我的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 with my friend on the     beach</option>
    </select>

和css：

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