Teaching step

The flex item that refuses to shrink

HardThe min-width:auto floorF38

flex: 1 on the panel, flex: none on the sidebar, and the sidebar is still hanging off the right edge. Making the panel shrink more does nothing. Setting flex-shrink: 999 does nothing.

A 600px shelf holding a flexible panel and a 260px sidebar. Inside the panel is a 420px block — think of a wide table, a preview image, or a URL that will not break. Make the panel take exactly the space the sidebar leaves it — 340px — with the sidebar fully inside the shelf, and keep it right when the shelf changes width. The starter already says flex: 1. Look at what that gets you, and at what number the panel stops at.

Hint

What is the initial value of `min-width`? Not the value you would have guessed — the one in the spec.

Live preview1000×320

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="shelf"><div class="main"><div class="slab"></div></div><div class="aside"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.shelf { width: 600px; height: 120px; padding: 24px 0; background: #16161d; display: flex; }
.main { height: 72px; background: #7bdff2; }
.slab { width: 420px; max-width: 100%; height: 40px; margin: 16px; background: #1b3a44; }
.aside { flex: none; width: 260px; height: 72px; background: #b5e48c; }