When option in select list doesn't fix into select width it's value is trimmed if we select it

Question

So I have a select list with multiple options.

List itself is limited by width. Most of options are expected to fit into lists width, but there could be once that are longer, and I should handle this situation.

overflow-x:scroll helps me to see the the long option values (by scrolling via x axis), but I have onether problem: when I select a long option (that doen't fit into select width) and scroll x-asis, text inside my option is trimmed to select lenth. But I want it to be fully displayed when scrolling.

Note: I know a solution with appying auto-width on select, but I'm not allowed to change the width here. It should stay the same.

select {
  width: 100px;
  overflow-x:scroll;
}

 <select multiple size="5">
       <option>Option1</option>
       <option>Option2</option>
       <option>Option3</option>
       <option>Some Very Long Option</option>
    </select>

Answer 1

Please try this:

select {
  width: 100px;
  overflow-x:scroll;
}
select option:checked{
  background:#1E90FF;
  color:#fff;
  display: inline-block;
  /*display:inline-block; (or) display: table;width: 100%;*/
}

<select multiple size="5">
       <option>Option1</option>
       <option>Option2</option>
       <option>Option3</option>
       <option>Some Very Long Option</option>
</select>