Why ReactFlow Edges Disappear in Next.js (Two Subtle CSS and Context Bugs)

We were building a knowledge graph view — a React Flow canvas that shows topic chains and semantic links between video segments. Nodes rendered fine. But every time we loaded the view, the edges (the connecting lines between nodes) were simply gone. No errors in the console. Nodes in place. Just... no edges. Here's the two-bug chain that caused it. Bug 1: overflow-hidden creates a stacking context that clips SVG edges The first culprit was this wrapper div: // GraphView.tsx — BEFORE <div className="rounded-xl overflow-hidden border border-gray-800" style={{ height: 420 }}> <VideoKnowledgeGraph ... /> </div> overflow-hidden in CSS does two things most people don't think about: It clips content that overflows the box (the obvious thing) It creates a new stacking context ReactFlow renders its edges as an SVG layer that is absolutely positioned within the canvas container. When an ancestor has overflow: hidden, that SVG layer gets clipped — even if it's technically within