html - View whole select options

Question

I use select element with fixed width. However, when I have option element nested in select, which has quite long text, then, when this option is being selected, it does not get full background-width (I want the background to be 100%) and also the text is hidden.

Here is the example with the last option being hidden.

.x {
  width: 200px;
  overflow-x: auto;
}

<select class="x" size="4">
  <option class="y" selected>xyz</option>
  <option class="y" selected>xyz</option>
  <option class="y" selected>xyz</option>
  <option class="y" selected>xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</option>
</select>

question from:https://stackoverflow.com/questions/65919989/view-whole-select-options

Answer 1

You can see the full width using a single css property . Please add a class to solve the issue :

.y{
   width: fit-content;
  }

Using this style, you could see that the background color gets filled to the full width.