ReactFlow collapses to zero height inside pn.Column

[MarcSkovMadsen]

ReactFlow collapses to zero height inside pn.Column

Description

When a ReactFlow component is placed inside a pn.Column (or other Panel layout), it renders with zero height and is invisible. The component only becomes visible when given an explicit min_height.

This is unexpected — most Panel components auto-size within layouts without needing explicit height.

Minimum reproducible example

import panel as pn
from panel_reactflow import ReactFlow, NodeSpec, EdgeSpec

pn.extension("jsoneditor")

flow = ReactFlow()
flow.add_node(NodeSpec(id="n1", position={"x": 0, "y": 0}, label="Node 1"))
flow.add_node(NodeSpec(id="n2", position={"x": 200, "y": 0}, label="Node 2"))
flow.add_edge(EdgeSpec(id="e1", source="n1", target="n2"))

# BUG: only the button is visible; the flow is invisible (zero height)
layout = pn.Column(pn.widgets.Button(name="Click me"), flow)
layout.servable()

Workaround

Set min_height explicitly:

flow = ReactFlow(min_height=600, sizing_mode="stretch_both")

Expected behavior

ReactFlow should render with a reasonable default height when placed inside a layout, consistent with other Panel components.

Notes

• flow.servable() on its own (not inside a Column) renders fine.
• The issue affects any layout container (pn.Column, pn.Row, etc.), not just pn.Column.
• If behaviour not changed this should be very clearly documented otherwise we will see users and LLMs struggle.