I cannot seem to have just the x-axis scroll on. When I use overflow-x-auto, I get the desired affect for the x-axis, but the y-axis gets one too.

I am trying to style a div that wraps my react-select Select components, which have drop-downs that require space.The div seems to take this into account when calculating the space it needs.

I have tried a combination of different things suggested by ChatGPT and looking at the questions already posted, which did lead me to this handy page: https://www.brunildo.org/test/Overflowxy2.html, but still none of the options are what I need.

Here is the relevent markup:

`

Parameters

{parameters?.map((parameter, index) => {
const staticOptionsToPass = getStaticOptionsToPass(parameter.key);

      return (
        <div key={index} className='flex-shrink-0 flex items-center overflow-y-none scrollbar'>
          <ParameterKeySearch
            value={parameter.key}
            options={STATIC_KEY_OPTIONS}
            onChange={(selectedKey) => handleKeyChange(index, selectedKey)}
            placeholder='Enter key...'
            selectedKey={parameter.key}
          />
          {parameter.key && (
            <ParameterValueSearch
              value={parameter.value}
              options={staticOptionsToPass}
              onChange={(selectedValue) => handleValueChange(index, selectedValue)}
              placeholder='Enter value...'
              selectedValue={parameter.value}
            />
          )}
          <Button
            variant='outline'
            onClick={() => handleDeleteParameter(index)}
            className='p-2 mr-2'
          >
            <MdDelete size={18}/>
          </Button>
        </div>
      );
    })
    }
  </div>
</div>`

Before removing overflow-y-hidden
After removing overflow-y-hidden