How do I wrap Reactflow in Scrollable container

Is it possible to wrap reactflow in a scrollable container:Row direction: I have the following component that I created for my reactflow nodes,I am using custom Nodes to render the view for the individual nodes and passing the nodes to the Mainview in the reactflow wrapper as nodeTypes:

  const nodeTypes = {
    customNode: CustomNode,
    statusCardNode: StatusCard as ComponentType<NodeProps>,
  };

CustomNode:

const CustomNode = ({ data }: NodeProps<CustomNodeData>) => {
  const {
    value,
    label,
    attributes,
    onClick,
    handles,
    workOrderCount,
    rulesCount,
    viewerCount,
    statusFlagVisibility,
    tooltip,
    draggable,
    onDragStart,
  } = data;

  return (
    <div css={customNodeStyle} onClick={onClick}>
      <WorkflowItem
        value={value}
        label={`${label.split(" ").slice(0, 4).join(" ")}...`}
        workOrderCount={workOrderCount}
        rulesCount={rulesCount}
        viewerCount={viewerCount}
        attributes={attributes}
        statusFlagVisibility={statusFlagVisibility}
        tooltip={tooltip}
        draggable={draggable}
        onDragStart={onDragStart}
      />
      {handles?.right || (
        <Handle
          type="source"
          position={Position.Right}
          css={handleStyle}
          onConnect={() => {}}
        />
      )}
      {handles?.left || (
        <Handle
          type="target"
          position={Position.Left}
          css={handleStyle}
          onConnect={() => {}}
        />
      )}
    </div>
  );
};

export default CustomNode;

But i am struggling to wrap reactflow in a scrollable container or css div in MainView:

I would like to be able to scroll row direction to access the nodes instead of all directions across the reactflow background/canvas.

MainView

<div
          css={css`
            position: relative;
            width: 100%;
            height: 80%;
            overflow-x: auto;
            overflow-y: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          `}
        >
          <div
            css={css`
              position: relative;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: row;
            `}
          >
            <ReactFlow
              nodes={nodes}
              edges={edges}
              nodeTypes={nodeTypes}
              onNodesChange={onNodesChange}
              onEdgesChange={onEdgesChange}
              onConnect={(connection) =>
                setEdges((eds) => addEdge(connection, eds))
              }
              connectionLineType={ConnectionLineType.SmoothStep}
              fitView
              snapToGrid={true}
              snapGrid={[100, 100]}
              minZoom={1}
              maxZoom={1.2}
            >
              <Background gap={12} size={1} />
            </ReactFlow>
          </div>
            </div>

My hooks and How I am declaring nodeTypes:

 const navigate = useNavigate();
  const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
  const [selectedWorkflowId, setSelectedWorkflowId] = useState<number | null>(
    null
  );
  const [statuses, setStatuses] = useState<
    {
      id: string;
      type: string;
      data: {
        label: string;
        value: string;
        statusFlagVisibility: boolean;
        tooltip: string;
        draggable: boolean;
      };
      position: { x: number; y: number };
      draggable: boolean;
    }[]
  >([]);
  const [workflows, setWorkflows] = useState<WorkflowInterface[]>([]);
  const [drawerOpen, setDrawerOpen] = useState(false); // drawer toggle
  const [rightDrawerOpen, setRightDrawerOpen] = useState(false); // right drawer toggle
  const [loading, setLoading] = useState(false); // Loading state for ActionBar
  const [statusFlagsToggle, setStatusFlagsToggle] = useState(true); // Status Flags toggle
  const handleStatusFlags = (checked: boolean) => setStatusFlagsToggle(checked); // Handle status flags toggle
  const [groupedStatusToggle, setGroupedStatusToggle] = useState(false); // Grouped on System Status toggle
  const [anchorMenuOptions, setAnchorMenuOptions] =
    useState<HTMLElement | null>(null); // Menu state
  const [isSelected, setIsSelected] = useState(false); // Track menu selection
  const [menuOpen, setMenuOpen] = useState(false); // Menu open state
  const [currentWorkflow, setCurrentWorkflow] =
    useState<WorkflowInterface | null>(null); // Selected workflow
  const [searchedValue, setSearchedValue] = useState("");
  const statusPositions: { [key: string]: { x: number; y: number } } = {};
  const [selectedStatusId, setSelectedStatusId] = useState<string | null>(null);
  const [selectedRuleValue, setSelectedRuleValue] = useState<string | null>(
    null
  );
// Declaring custom nodeTypes.
  const nodeTypes = {
    customNode: CustomNode,
    statusCardNode: SwimLaneStatusCard as ComponentType<NodeProps>,
  };
  const handleGroupedStatus = (checked: boolean) =>
    setGroupedStatusToggle(checked); // Handle grouped status toggle

  const handleMenuOpen = useCallback(
    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      setAnchorMenuOptions(event.currentTarget);
      setIsSelected(!isSelected);
      setMenuOpen(true);
    },
    [isSelected]
  );

I tried wrapping the entire reactflow in a MaterialUi Container,even tried regular css using emotion and set overflow on the div to allow srolling,but nothing seems to work.