Before this lesson

Understand box sizing, class selectors and content-driven dimensions.

What you will be able to do

Work with main and cross axes, explain flex sizing values, and handle long content that prevents shrinking.

Understand the mechanism

Flexbox distributes space along one main axis and aligns along a cross axis. With row, the main axis is commonly horizontal, but writing mode and direction affect that interpretation; justify-content does not universally mean horizontal alignment. Containers define the layout model, while items participate in space allocation. Identify the direct items before writing rules.

flex:1 1 180px sets growth, shrinkage and basis. The basis is not the final width: available space, gaps and minimum sizes also matter. An item’s automatic minimum can prevent shrinking around long content. min-width:0 is a common adjustment, but unbreakable content still needs a wrapping or scrolling policy.

Runnable example

<style>
  .row { display: flex; gap: 16px; flex-wrap: wrap; }
  .item { flex: 1 1 180px; padding: 24px; background: #edf6ee; }
</style>
<div class="row">
  <div class="item">HTML</div>
  <div class="item">CSS</div>
  <div class="item">JavaScript</div>
</div>

Trace and verify

Narrow the window gradually and observe where cards wrap. Disable wrapping to distinguish shrinking from moving to a new line. Put a long URL in one card and inspect its effect on the row. Apply a minimum-size and wrapping policy, then verify that the fix addresses the content constraint instead of accidentally changing container width.

Common mistakes and boundaries

align-items:center does not center the container on the page; it aligns items within it. flex:1 is not an unconditional promise of equal widths because content constraints can intervene. Avoid changing an important reading sequence with order when keyboard and source order remain different.

Practice challenge

Build a toolbar with a flexible title and a fixed action button. Long titles may wrap, but the button must remain fully visible.

Reference solution and reasoning

Give the title flex:1 and min-width:0, and the action flex:none. Preserve the action’s usability by letting the title wrap rather than crushing the button text. At very narrow sizes, the whole toolbar can wrap.

<style>.toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.toolbar h2{flex:1;min-width:0;overflow-wrap:anywhere}.toolbar button{flex:none}</style>
<div class="toolbar"><h2>A long learning-library title</h2><button type="button">Save</button></div>

Lab: why flex:1 can still overflow

Consider a fixed sidebar beside content containing an unbroken identifier. flex-grow distributes space; it does not guarantee unlimited shrinking. This 320px example isolates the automatic minimum-size problem before applying a minimal fix.

<!doctype html><html lang="en"><meta charset="utf-8">
<title>Flex sizing lab</title>
<style>
* { box-sizing: border-box; }
.row { display: flex; width: 320px; max-width: 100%; border: 1px solid; }
.side { flex: 0 0 90px; }
.main { flex: 1; }
.fixed .main { min-width: 0; overflow-wrap: anywhere; }
</style>
<div class="row"><div class="side">Menu</div><div class="main">verylongunbrokenidentifier012345678901234567890123456789</div></div>
<script>
const row = document.querySelector('.row');
console.log('before', row.scrollWidth > row.clientWidth);
row.classList.add('fixed');
console.log('after', row.scrollWidth > row.clientWidth);
</script></html>

Expected observations

With typical default browser fonts, before is true and after is false. Disable .fixed in DevTools to reproduce the failure. The container also respects a viewport narrower than 320px.

Why this happens and where it stops applying

An automatic minimum width can be determined by unbreakable content. min-width:0 allows the item to shrink; overflow-wrap:anywhere gives text break opportunities. They address different constraints. overflow:hidden may remove a scrollbar by concealing content. For source code whose line structure matters, prefer a scrolling code block within the flexible item instead of arbitrarily breaking code.

Extension challenge

Replace the text with an 800px-wide image. Is the text-oriented fix sufficient?

Reasoned solution

Text wrapping does not constrain intrinsic image dimensions. Add max-width:100%;height:auto to content images and measure again. Keep min-width:0; image scaling and flex-item shrinking are separate constraints.

Further reading