Estoy usando mdcselect para mi proyecto.

 <div class="trailer-size-sort sort-dropdown loading"> <div class="mdc-select mdc-trailer-size"> <span class="mdc-floating-label" id="size" style="">Size</span> <div class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-label="label">Value</div> <div class="mdc-select__menu mdc-trailer-size--list mdc-menu mdc-menu-surface detatched-list" role="listbox"> <ul class="mdc-list"> <li class="mdc-list-item" data-value = "some value1">some value1</li> <li class="mdc-list-item" data-value = "some value2">some value2</li> <li class="mdc-list-item" data-value = "some value3">some value3</li> </ul>

ahora, aunque el cuadro de selección se muestra correctamente, el menú desplegable salta a la parte inferior de la página al hacer clic,

la "parte superior" no se calcula.

cuando no funciona

cuando funciona

incapaz de encontrar la causa raíz de este comportamiento.