Build a Split Pane (Horizontal & Vertical) with Constraints

Question

Accepted Answer

**Requirements**
- Two or three panes split horizontally or vertically with gutters; drag gutter to resize.
- Props: `direction="horizontal"|"vertical"`, `minSize`, `defaultSize`, `collapsible`.
- Double-click gutter to collapse/expand; keyboard Arrow keys on gutter (Shift+Arrow for 10px); `aria` separator.
- Persist sizes to localStorage; handle window resize.

**Architecture**
- Flex layout: each pane `flex: 0 0 sizepx` or `flex: basis`. Gutter is `role="separator"` with `aria-valuenow`.
- Drag like Resizer: pointer capture, compute delta along axis (`clientX` for horizontal, `clientY` for vertical), clamp by `minSize` and container size.
- Collapse: store `prevSize` before collapse, restore on dblclick.

**What interviewers look for:** axis-aware delta, clamp + container bounds, collapsible state, keyboard, flex vs absolute layout, persistence.

**Reference implementation**
```jsx
export function SplitPane({ children, direction="horizontal", minSize=100 }) {
  const [sizes, setSizes

Build a Split Pane (Horizontal & Vertical) with Constraints

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.