Part of the selected text is hidden when selecting an option

Question

I stumbled upon curiosity.

I have a field selectthat allows overflow with an option exceeding the width of the field select:

When I select option, part of the text disappears:

It is like width option. If I increase the width option, I can select more text. However, even if I set it to 100% (in the field select), I still can’t select all the text.

free jsfiddle.

Is this something obvious to CSS experts out there?

After a bit more thinking: width: 100%obviously it won't work. Am I forced to use JavaScript to dynamically determine the width of options to the maximum width?

Answer 1

float: left option ( Chrome):

select {
  width: 20%;
  overflow: auto;
}

option {
  float: left;
}

<select size="3">
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>    
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
</select>

Hide result

Answer 2

, . , chosen.

,

overflow-x: hidden;

.

, select, . , , , , .

, ,

overflow: auto;

.

, option