Build a Split Pane (Horizontal & Vertical) with Constraints

Q: Build a Split Pane (Horizontal & Vertical) with Constraints

**Target Audience:** Candidates comfortable with React components and hooks. It assumes the single-handle basics from [Resizable Panels with useResizable](/interview-question/build-resizable-panels-with-useresizable-hook) (pointer events, computing from the drag start, listener clean-up) and explains the new parts from zero: two axes, nesting, fractions versus pixels and constraints on both sides. **Difficulty:** Medium > **How to read this doc:** Plain words first, then 📌 Interview term: callouts. Excerpts are copied from the runnable solution. jsdom has no layout, so the verifier gave each container a known size; a second run in real Chromium 141 checked real layout and a 360 px viewport. ## 1. Why This Even Matters — A Story First Imagine a room divided by a sliding wall, and one of the two halves divided again by a sliding floor-to-ceiling shelf, the other way. Each sliding part has rules: the hallway on the left may never be narrower than a doorway, the office on

The problem

Question presented to candidate: "Build an IDE-style layout: a navigator on the left, and on the right an editor above a terminal. Both dividers can be dragged. The navigator must stay at least 160 px wide and the right side at least 240 px; the editor at least 120 px tall and the terminal at least 80 px. When the window is resized the layout should keep its proportions without breaking those minimums. Make one reusable split pane component that works in both directions and can be nested."

Requirements:

A SplitPane component with direction (horizontal or vertical), an initial split, minFirst and minSecond in px, and two content slots.
Nested use: a horizontal split whose second pane is a vertical split.
Dragging the divider along the right axis, clamped so neither pane goes below its minimum; the pointer may leave the divider or the window.
The split stored as a fraction of the free space, so window resizes keep proportions, then re-clamped against the new size.
A defined behaviour when the container is smaller than both minimums together.
Keyboard: arrows along the pane axis only, Shift for bigger steps, Home and End to the limits, Enter to collapse and restore the first pane; double-click resets.
Separator semantics: role="separator" with the correct aria-orientation, aria-valuenow as a percentage, aria-valuetext in pixels, aria-controls.

What a strong answer should cover:

Why fractions for state and pixels for constraints, and when to convert (at pointerdown, on keys, on window resize).
Measuring the container with getBoundingClientRect, minus the gutter, and keeping the grab offset inside the divider so the bar does not jump.
Axis-aware code: one component reading clientX or clientY, with matching keys and orientation (a side-by-side split has a vertical bar).
Clamping both sides at once and resolving impossible constraints deterministically.
Content projection (children, named slots, multi-slot ng-content) so panes can nest.
Listener clean-up for the drag and for the window resize handler.

Clarifying questions expected:

"Should sizes persist, and should a collapsed pane stay collapsed after reload?"
"When the window is too small for both minimums, which pane wins?"
"Do we need more than two panes per split?"

Code / implementation expected: Yes. The reusable split pane and the nested IDE layout.

React
Split Pane
Resizable
Layout
Keyboard

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Candidates comfortable with React components and hooks. It assumes the single-handle basics from Resizable Panels with useResizable (pointer events, computing from the drag start, listener clean-up) and explains the new parts from zero: two axes, nesting, fractions versus pixels and constraints on both sides. Difficulty: Medium

How to read this doc: Plain words first, then 📌 Interview term: callouts. Excerpts are copied from the runnable solution. jsdom has no layout, so the verifier gave each container a known size; a second run in real Chromium 141 checked real layout and a 360 px viewport.

1. Why This Even Matters — A Story First

Imagine a room divided by a sliding wall, and one of the two halves divided again by a sliding floor-to-ceiling shelf, the other way. Each sliding part

The solution is hidden so you can try first

12 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import SplitPane from "./src/components/SplitPane";

export default function App() {
  return (
    <div className="ide">
      <SplitPane
        id="outer"
        direction="horizontal"
        initial={0.3}
        minFirst={160}
        minSecond={240}
        label="Resize navigator"
      >
        <nav className="panel">
          <h2>Navigator</h2>
          <p>min 160 px</p>
        </nav>
        <SplitPane
          id="inner"
          direction="vertical"
          initial={0.6}
          minFirst={120}
          minSecond={80}
          label="Resize terminal"
        >
          <section className="panel">
            <h2>Editor</h2>
            <p>min 120 px tall; the right side keeps at least 240 px</p>
          </section>
          <section className="panel">
            <h2>Terminal</h2>
            <p>min 80 px tall</p>
          </section>
        </SplitPane>
      </SplitPane>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.