material UI AutoComplete dropdown position

property disablePortal={true} works for me.

For the current latest version of MaterialUI, you can use the property disablePortal to achieve behavior when a popup with a list of options will always be shown on the bottom

Should be something like this

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  style={{ width: 300, paddingTop: 300 }}

  disablePortal={true}

  renderInput={(params) => (
    <TextField {...params} label="Combo box" variant="outlined" />
  )}
/>

You can do it with flexbox

You can wrap your Autocomplete component with a div and add the below style

    <div style={{display: 'flex', alignItems: 'flex-end'}}>
        <Autocomplete
          id="combo-box-demo"
          options={top100Films}
          getOptionLabel={(option) => option.title}
          style={{ width: 300}}
          renderInput={(params) => (
            <TextField {...params} label="Combo box" variant="outlined" />
          )}
        />
    </div>