Radix UI "Select" primitive overflows screen

Question

I'm using the "Select" component from Radix-UI Radix Ui Select and the modal that pops up is overflowing the top of the screen, please see the attached image. overflowing modal. But when i have a few options, it works fine, please see attached imae => fine modal

The select button:

const SelectButton = (props: Props) => {


  function handleOnValueChange(newValue:string){
    props.onChange(newValue)
  }


  return (
    <SelectPrimitive.Root defaultValue="blueberry" onValueChange={handleOnValueChange}>

      <SelectPrimitive.Trigger asChild aria-label="Food">
        {props.children}
      </SelectPrimitive.Trigger>

      <SelectPrimitive.Content className="rounded-lg mt-4 top-5">
        <SelectPrimitive.ScrollUpButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
          <ChevronUpIcon />
        </SelectPrimitive.ScrollUpButton>
        <SelectPrimitive.Viewport className="bg-white dark:bg-black p-2 rounded-lg shadow-lg top-5">
          <SelectPrimitive.Group>
            {props.options.map(
              (f, i) => (
                <SelectPrimitive.Item
                  //disabled={f === "Grapes"}
                  key={`${f}-${i}`}
                  value={props.toLower == undefined ? f.toLowerCase() : f}
                  className={cx(
                    "relative flex items-center px-8 py-2 rounded-md text-sm text-gray-700 dark:text-gray-300 font-medium focus:bg-gray-100 dark:focus:bg-gray-900",
                    "radix-disabled:opacity-50",
                    "focus:outline-none select-none"
                  )}
                >
                  <SelectPrimitive.ItemText>{f}</SelectPrimitive.ItemText>
                  <SelectPrimitive.ItemIndicator className="absolute left-2 inline-flex items-center">
                    <CheckIcon />
                  </SelectPrimitive.ItemIndicator>
                </SelectPrimitive.Item>
              )
            )}
          </SelectPrimitive.Group>
        </SelectPrimitive.Viewport>
        <SelectPrimitive.ScrollDownButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
          <ChevronDownIcon />
        </SelectPrimitive.ScrollDownButton>
      </SelectPrimitive.Content>

    </SelectPrimitive.Root>
  );
};

export default SelectButton;

Answer 1

Add this css to SelectPrimitive.Content:

max-height: var(--radix-select-content-available-height);

But note that this is only supported when <SelectPrimitive.Content position="popper" />

Learn more here