Horizontal scroll from datalist html in Chrome mobile

Question

I am working with the data-list feature in HTML forms...

 <input list="veepeeone" name="veepeeone" placeholder="Null"
        value="{{ veepeeone }}" autocomplete="off">
        <datalist id="veepeeone">
          {% for member in pastorate_male %}
          <option value="{{ member.name }}">
          {% endfor %}
        </datalist>

Everything works fine, except it has an annoying horizontal scroll that displays above the mobile keyboard when the form is loaded on Google Chrome mobile, which is a very disappointing user experience. The form loads vertically in another browser (like Samsung Internet) so looks like a problem peculiar to Chrome.

Is there a way to force ALL browsers (including Chrome) to load the options vertically like in other browsers, even if it will involve some JS or something? Some of the fields in the form contain as many as 100 options, and that's a horrible user experience for someone trying to scroll through the names - and most people use Google Chrome as their default browser.

Thank you.