Build it

One flexible pane between two fixed rails

EasySizing

The app shell has a 240px nav, a 200px inspector, and a document pane that renders zero pixels wide because nothing told it how big to be.

Keep .nav at exactly 240px and .meta at exactly 200px, and give .pane every pixel between them. At 1000px that is 560px, and it has to follow the window.

Hint

Two of the three already know their size. What does the third one need to say, and does it need a number?

Live preview1000×700

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="shell"><aside class="rail nav"></aside><main class="pane"></main><aside class="rail meta"></aside></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; }
.shell { width: 1000px; height: 400px; background: #0f0f14; display: flex; }
.rail { height: 400px; background: #16161d; }
.nav { width: 240px; }
.meta { width: 200px; }
.pane { height: 400px; background: #2a2a36; }