Materialize select scrolling issue

Question

I'm working on a web app that uses a select with quite a number of options. The problem is some options cannot be seen on screen since MaterializeCSS' select does seem to be scrollable. How do I fix this?

HTML and PHP

<div class="main container">
<div class="section">
  ...
  ...
  <div class="row">
    <div class="input-field col s12 m8 offset-m2 l6 offset-l3">
      <select>
        <option value="" disabled selected>Choose a degree program</option>
        <?php
        foreach ($degrees as $degree){
          echo '<option value="'.$degree.'">'.$degree.'</option>';
        }
        ?>
      </select>
      <label>Degree program</label>
    </div>
  </div>
</div>
</div>

CSS

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.main {
  flex: 1 0 auto;
}

Answer 1

Please you find .dropdown-content in materialize.css.

You see max-height:650px and remove/update it you want to dropdown box size.

I have been fixed this style in my project. It is ok!. Thanks.....

Before removed/updated max-height:650px property in materialize.css Before

.dropdown-content {
    max-height: 650px;
}

And I customize max-height:250px in materialize.css After

.dropdown-content {
    max-height: 250px;
}

Answer 2

Neither of the above worked for me, but this did.

.dropdown-content {
   max-height: 350px !important;
   overflow-y: auto !important;
   backface-visibility: hidden !important;
}