HTML/Angular create scrollable <select> dropdown?

Question

Hello I have been trying to create a dropdown list with and while avoiding libraries like Angular material. Picture

What I am aiming for is to show a limited amount of options and make the rest viewable by adding a scrollbar to the dropdown menu. I have been trying different approaches but couldn't find one that suits my specific requirement.

.field{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 12px;

    position: static;
    width: 200px;
    height: 40px;
    left: calc(50% - 449px/2);
    top: 32px;

    /* UI/White */

    background: #FFFFFF;
    /* UI/Grey/stroke */

    border: 1px solid #BBC0C9;
    box-sizing: border-box;
    /* shadow-focus */

    box-shadow: 0px 0px 1px 2px #FED79A;
    border-radius: 4px;

    /* Inside auto layout */

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    margin: 8px 0px;

    overflow: hidden;
}

<select  class="field">
    <option value="" disabled selected hidden>- select item -</option>
    <option> test1 </option>
    <option> test2 </option>
    <option> test3 </option>
    <option> test4 </option>
    <option> test5 </option>
    <option> test6 </option>
</select>