Html Select "size" issue

The select element shown here (with a fixed width) has 3 options in it and a size of 3. So it should fit the content exactly. However, it seems to reserve enough space at the bottom to be able to show all the option elements with the same height which it doesn't need to. (Run the code snippet to see.)

Is there any way to fix this, so that there is no extra space after the last option?

.myClass select 
{
    width: 150px;
}

.myClass option{
   white-space: normal;
}

<div class="myClass"><select name="mySelect" size="3"><option>1</option><option>2 This options is very long so we wrap the text. That causes the select to show extra blank space at the bottom!</option><option>3</option></select></div>

Edit

From the comments, it seems that browsers vary in how they display this.