JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <select id="select" class="select" size="2">
        <option>item 1</option>
        <option>item 2</option>
        <option>item 3</option>
        <option>item 4</option>
        <option>item 5</option>
        <option>item 6</option>
    </select>
</div>

CSS

.wrapper {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    border: solid black 1px;
}
.select {
    width: 200px;
    min-height: 50px;
    margin: 0 -20px 0 0;
}
.select.scrolling {
    margin: 0;
}

JavaScript

var select = document.getElementById('select');

if (select.clientHeight < select.scrollHeight) {
    select.classList.add('scrolling'); // classList: IE9 and higher
}