html - Unexpected results from styling a select element

Question

I am trying to create a select element but I get unexpected results.

First, when an option element is overflowed, I cannot view the whole 4 options at once. There is a vertical scroll when option element is being overflowed (but if it wouldn't - I could see the whole 4 options).

Secondly, you can see that when you choose either of the option elements, the background is not 100% of the whole select element (and I consider the select element width to consist of the scroll extra width).

Thirdly.. You can choose the 4th option element and see that once you choose it part of the element text is hidden.

How can I fix these problems?

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

.y {
  padding: 5px;
  width: 100%;
}

<select class="x" size="4">
  <option class="y">Test</option>
  <option class="y">Test</option>
  <option class="y">Test</option>
  <option class="y">Test Test Test Test  Test Test Test Test</option>
</select>

question from:https://stackoverflow.com/questions/65921620/unexpected-results-from-styling-a-select-element