[{"data":1,"prerenderedAt":1126},["ShallowReactive",2],{"page-\u002Fcss\u002F07-flexbox":3},{"id":4,"title":5,"body":6,"description":1118,"extension":1119,"meta":1120,"navigation":1121,"path":1122,"seo":1123,"stem":1124,"__hash__":1125},"content\u002Fcss\u002F07-flexbox.md","07 — Flexbox: One-Dimensional Layout & the flex Algorithm",{"type":7,"value":8,"toc":1095},"minimark",[9,13,34,39,196,203,328,340,362,368,372,419,492,509,513,517,593,597,680,684,734,738,812,819,849,853,929,933,1027,1031,1066,1091],[10,11,5],"h1",{"id":12},"_07-flexbox-one-dimensional-layout-the-flex-algorithm",[14,15,16,17,21,22,25,26,29,30,33],"p",{},"Flexbox arranges items along a single axis (row or column) with a grow\u002Fshrink\u002Fbasis algorithm. The engine distributes free space according to ",[18,19,20],"code",{},"flex-grow",", shrinks according to ",[18,23,24],{},"flex-shrink",", and sizes from ",[18,27,28],{},"flex-basis",". The one bug every flexbox developer hits: ",[18,31,32],{},"min-width: auto"," preventing shrink. Master that, and flexbox is predictable.",[35,36,38],"h2",{"id":37},"the-flex-container","The Flex Container",[40,41,43],"code-wrapper",{"language":42},"css",[44,45,49],"pre",{"className":46,"code":47,"language":42,"meta":48,"style":48},"language-css shiki shiki-themes github-light github-dark",".container {\n  display: flex;              \u002F* children become flex items. Default: row, nowrap. *\u002F\n  flex-direction: row;        \u002F* row | row-reverse | column | column-reverse *\u002F\n  flex-wrap: wrap;             \u002F* nowrap (default: shrink to fit) | wrap | wrap-reverse *\u002F\n  gap: 1rem;                   \u002F* modern spacing: no margin hacks, correct on wrap (no trailing gap) *\u002F\n  justify-content: space-between; \u002F* main-axis distribution: flex-start|end|center|space-between|around|evenly *\u002F\n  align-items: center;         \u002F* cross-axis alignment: stretch(default)|flex-start|end|center|baseline *\u002F\n  align-content: flex-start;   \u002F* multi-LINE cross-axis alignment (only when items wrap). Single-line: no-op. *\u002F\n}\n","",[18,50,51,64,84,101,118,139,156,173,190],{"__ignoreMap":48},[52,53,56,60],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sIsaT",".container",[52,61,63],{"class":62},"ssxIu"," {\n",[52,65,67,71,74,77,80],{"class":54,"line":66},2,[52,68,70],{"class":69},"snvgF","  display",[52,72,73],{"class":62},": ",[52,75,76],{"class":69},"flex",[52,78,79],{"class":62},";              ",[52,81,83],{"class":82},"sdCPZ","\u002F* children become flex items. Default: row, nowrap. *\u002F\n",[52,85,87,90,92,95,98],{"class":54,"line":86},3,[52,88,89],{"class":69},"  flex-direction",[52,91,73],{"class":62},[52,93,94],{"class":69},"row",[52,96,97],{"class":62},";        ",[52,99,100],{"class":82},"\u002F* row | row-reverse | column | column-reverse *\u002F\n",[52,102,104,107,109,112,115],{"class":54,"line":103},4,[52,105,106],{"class":69},"  flex-wrap",[52,108,73],{"class":62},[52,110,111],{"class":69},"wrap",[52,113,114],{"class":62},";             ",[52,116,117],{"class":82},"\u002F* nowrap (default: shrink to fit) | wrap | wrap-reverse *\u002F\n",[52,119,121,124,126,129,133,136],{"class":54,"line":120},5,[52,122,123],{"class":69},"  gap",[52,125,73],{"class":62},[52,127,128],{"class":69},"1",[52,130,132],{"class":131},"svdQ7","rem",[52,134,135],{"class":62},";                   ",[52,137,138],{"class":82},"\u002F* modern spacing: no margin hacks, correct on wrap (no trailing gap) *\u002F\n",[52,140,142,145,147,150,153],{"class":54,"line":141},6,[52,143,144],{"class":69},"  justify-content",[52,146,73],{"class":62},[52,148,149],{"class":69},"space-between",[52,151,152],{"class":62},"; ",[52,154,155],{"class":82},"\u002F* main-axis distribution: flex-start|end|center|space-between|around|evenly *\u002F\n",[52,157,159,162,164,167,170],{"class":54,"line":158},7,[52,160,161],{"class":69},"  align-items",[52,163,73],{"class":62},[52,165,166],{"class":69},"center",[52,168,169],{"class":62},";         ",[52,171,172],{"class":82},"\u002F* cross-axis alignment: stretch(default)|flex-start|end|center|baseline *\u002F\n",[52,174,176,179,181,184,187],{"class":54,"line":175},8,[52,177,178],{"class":69},"  align-content",[52,180,73],{"class":62},[52,182,183],{"class":69},"flex-start",[52,185,186],{"class":62},";   ",[52,188,189],{"class":82},"\u002F* multi-LINE cross-axis alignment (only when items wrap). Single-line: no-op. *\u002F\n",[52,191,193],{"class":54,"line":192},9,[52,194,195],{"class":62},"}\n",[35,197,199,200,202],{"id":198},"the-flex-algorithm-grow-shrink-basis","The ",[18,201,76],{}," Algorithm — grow, shrink, basis",[40,204,205],{"language":42},[44,206,208],{"className":46,"code":207,"language":42,"meta":48,"style":48},"\u002F* flex: \u003Cgrow> \u003Cshrink> \u003Cbasis>. The engine: (1) sizes each item to its basis,\n   (2) if leftover space → distributes by grow ratio, (3) if overflow → shrinks by shrink ratio. *\u002F\n.item { flex: 1; }       \u002F* = 1 1 0%   → grow equally, basis 0 → EQUAL widths regardless of content *\u002F\n.item { flex: auto; }    \u002F* = 1 1 auto  → grow from content-sized basis → proportional to content *\u002F\n.item { flex: none; }    \u002F* = 0 0 auto  → no grow, no shrink → uses width\u002Fheight as-is *\u002F\n.item { flex: 0 0 250px; } \u002F* fixed 250px, no grow, no shrink *\u002F\n.item { flex: 1 1 min-content; } \u002F* grow, but never below min-content width *\u002F\n",[18,209,210,215,220,240,259,277,305],{"__ignoreMap":48},[52,211,212],{"class":54,"line":55},[52,213,214],{"class":82},"\u002F* flex: \u003Cgrow> \u003Cshrink> \u003Cbasis>. The engine: (1) sizes each item to its basis,\n",[52,216,217],{"class":54,"line":66},[52,218,219],{"class":82},"   (2) if leftover space → distributes by grow ratio, (3) if overflow → shrinks by shrink ratio. *\u002F\n",[52,221,222,225,228,230,232,234,237],{"class":54,"line":86},[52,223,224],{"class":58},".item",[52,226,227],{"class":62}," { ",[52,229,76],{"class":69},[52,231,73],{"class":62},[52,233,128],{"class":69},[52,235,236],{"class":62},"; }       ",[52,238,239],{"class":82},"\u002F* = 1 1 0%   → grow equally, basis 0 → EQUAL widths regardless of content *\u002F\n",[52,241,242,244,246,248,250,253,256],{"class":54,"line":103},[52,243,224],{"class":58},[52,245,227],{"class":62},[52,247,76],{"class":69},[52,249,73],{"class":62},[52,251,252],{"class":69},"auto",[52,254,255],{"class":62},"; }    ",[52,257,258],{"class":82},"\u002F* = 1 1 auto  → grow from content-sized basis → proportional to content *\u002F\n",[52,260,261,263,265,267,269,272,274],{"class":54,"line":120},[52,262,224],{"class":58},[52,264,227],{"class":62},[52,266,76],{"class":69},[52,268,73],{"class":62},[52,270,271],{"class":69},"none",[52,273,255],{"class":62},[52,275,276],{"class":82},"\u002F* = 0 0 auto  → no grow, no shrink → uses width\u002Fheight as-is *\u002F\n",[52,278,279,281,283,285,287,290,293,296,299,302],{"class":54,"line":141},[52,280,224],{"class":58},[52,282,227],{"class":62},[52,284,76],{"class":69},[52,286,73],{"class":62},[52,288,289],{"class":69},"0",[52,291,292],{"class":69}," 0",[52,294,295],{"class":69}," 250",[52,297,298],{"class":131},"px",[52,300,301],{"class":62},"; } ",[52,303,304],{"class":82},"\u002F* fixed 250px, no grow, no shrink *\u002F\n",[52,306,307,309,311,313,315,317,320,323,325],{"class":54,"line":158},[52,308,224],{"class":58},[52,310,227],{"class":62},[52,312,76],{"class":69},[52,314,73],{"class":62},[52,316,128],{"class":69},[52,318,319],{"class":69}," 1",[52,321,322],{"class":69}," min-content",[52,324,301],{"class":62},[52,326,327],{"class":82},"\u002F* grow, but never below min-content width *\u002F\n",[329,330,332,335,336,339],"h3",{"id":331},"flex-1-vs-flex-1-1-auto-the-basis-distinction",[18,333,334],{},"flex: 1"," vs ",[18,337,338],{},"flex: 1 1 auto"," — the basis distinction",[40,341,342],{"language":42},[44,343,345],{"className":46,"code":344,"language":42,"meta":48,"style":48},"\u002F* flex: 1 = basis 0% → all items share space EQUALLY (content doesn't affect size). *\u002F\n\u002F* flex: 1 1 auto = basis auto → items grow from their CONTENT size → larger content = larger item. *\u002F\n\u002F* For equal-width columns: flex: 1. For \"fill remaining but respect content\": flex: 1 1 auto. *\u002F\n",[18,346,347,352,357],{"__ignoreMap":48},[52,348,349],{"class":54,"line":55},[52,350,351],{"class":82},"\u002F* flex: 1 = basis 0% → all items share space EQUALLY (content doesn't affect size). *\u002F\n",[52,353,354],{"class":54,"line":66},[52,355,356],{"class":82},"\u002F* flex: 1 1 auto = basis auto → items grow from their CONTENT size → larger content = larger item. *\u002F\n",[52,358,359],{"class":54,"line":86},[52,360,361],{"class":82},"\u002F* For equal-width columns: flex: 1. For \"fill remaining but respect content\": flex: 1 1 auto. *\u002F\n",[35,363,365,367],{"id":364},"min-width-auto-the-flexbox-layout-killer",[18,366,32],{}," — the flexbox layout killer",[329,369,371],{"id":370},"anti-pattern-flex-items-with-long-content-overflow","Anti-pattern: flex items with long content overflow",[40,373,374],{"language":42},[44,375,377],{"className":46,"code":376,"language":42,"meta":48,"style":48},"\u002F* ❌ min-width: auto (default) = the item's intrinsic content minimum. Long text\u002FURLs can't shrink → overflow. *\u002F\n.row { display: flex; }\n.item { flex: 1; }  \u002F* grow:1 shrink:1, BUT min-width:auto blocks shrinking below content *\u002F\n",[18,378,379,384,401],{"__ignoreMap":48},[52,380,381],{"class":54,"line":55},[52,382,383],{"class":82},"\u002F* ❌ min-width: auto (default) = the item's intrinsic content minimum. Long text\u002FURLs can't shrink → overflow. *\u002F\n",[52,385,386,389,391,394,396,398],{"class":54,"line":66},[52,387,388],{"class":58},".row",[52,390,227],{"class":62},[52,392,393],{"class":69},"display",[52,395,73],{"class":62},[52,397,76],{"class":69},[52,399,400],{"class":62},"; }\n",[52,402,403,405,407,409,411,413,416],{"class":54,"line":86},[52,404,224],{"class":58},[52,406,227],{"class":62},[52,408,76],{"class":69},[52,410,73],{"class":62},[52,412,128],{"class":69},[52,414,415],{"class":62},"; }  ",[52,417,418],{"class":82},"\u002F* grow:1 shrink:1, BUT min-width:auto blocks shrinking below content *\u002F\n",[40,420,421],{"language":42},[44,422,424],{"className":46,"code":423,"language":42,"meta":48,"style":48},"\u002F* ✓ min-width:0 releases the content floor → flex-shrink can actually shrink the item *\u002F\n.row { display: flex; gap: 1rem; }\n.item { flex: 1; min-width: 0; overflow-wrap: break-word; }  \u002F* now shrinks as flex intends *\u002F\n",[18,425,426,431,456],{"__ignoreMap":48},[52,427,428],{"class":54,"line":55},[52,429,430],{"class":82},"\u002F* ✓ min-width:0 releases the content floor → flex-shrink can actually shrink the item *\u002F\n",[52,432,433,435,437,439,441,443,445,448,450,452,454],{"class":54,"line":66},[52,434,388],{"class":58},[52,436,227],{"class":62},[52,438,393],{"class":69},[52,440,73],{"class":62},[52,442,76],{"class":69},[52,444,152],{"class":62},[52,446,447],{"class":69},"gap",[52,449,73],{"class":62},[52,451,128],{"class":69},[52,453,132],{"class":131},[52,455,400],{"class":62},[52,457,458,460,462,464,466,468,470,473,475,477,479,482,484,487,489],{"class":54,"line":86},[52,459,224],{"class":58},[52,461,227],{"class":62},[52,463,76],{"class":69},[52,465,73],{"class":62},[52,467,128],{"class":69},[52,469,152],{"class":62},[52,471,472],{"class":69},"min-width",[52,474,73],{"class":62},[52,476,289],{"class":69},[52,478,152],{"class":62},[52,480,481],{"class":69},"overflow-wrap",[52,483,73],{"class":62},[52,485,486],{"class":69},"break-word",[52,488,415],{"class":62},[52,490,491],{"class":82},"\u002F* now shrinks as flex intends *\u002F\n",[14,493,494,498,499,501,502,505,506,508],{},[495,496,497],"strong",{},"Why:"," the default ",[18,500,32],{}," computes to the content's intrinsic minimum (longest unbreakable word). ",[18,503,504],{},"min-width: 0"," overrides this floor, letting ",[18,507,24],{}," work. This is the single most common flexbox bug.",[35,510,512],{"id":511},"production-patterns","Production Patterns",[329,514,516],{"id":515},"centering-horizontal-vertical","Centering (horizontal + vertical)",[40,518,519],{"language":42},[44,520,522],{"className":46,"code":521,"language":42,"meta":48,"style":48},".center {\n  display: flex;\n  justify-content: center;  \u002F* main axis (horizontal in a row) *\u002F\n  align-items: center;       \u002F* cross axis (vertical in a row) *\u002F\n  min-block-size: 100dvh;    \u002F* needs height for vertical centering to have space *\u002F\n}\n",[18,523,524,531,542,556,570,589],{"__ignoreMap":48},[52,525,526,529],{"class":54,"line":55},[52,527,528],{"class":58},".center",[52,530,63],{"class":62},[52,532,533,535,537,539],{"class":54,"line":66},[52,534,70],{"class":69},[52,536,73],{"class":62},[52,538,76],{"class":69},[52,540,541],{"class":62},";\n",[52,543,544,546,548,550,553],{"class":54,"line":86},[52,545,144],{"class":69},[52,547,73],{"class":62},[52,549,166],{"class":69},[52,551,552],{"class":62},";  ",[52,554,555],{"class":82},"\u002F* main axis (horizontal in a row) *\u002F\n",[52,557,558,560,562,564,567],{"class":54,"line":103},[52,559,161],{"class":69},[52,561,73],{"class":62},[52,563,166],{"class":69},[52,565,566],{"class":62},";       ",[52,568,569],{"class":82},"\u002F* cross axis (vertical in a row) *\u002F\n",[52,571,572,575,577,580,583,586],{"class":54,"line":120},[52,573,574],{"class":69},"  min-block-size",[52,576,73],{"class":62},[52,578,579],{"class":69},"100",[52,581,582],{"class":131},"dvh",[52,584,585],{"class":62},";    ",[52,587,588],{"class":82},"\u002F* needs height for vertical centering to have space *\u002F\n",[52,590,591],{"class":54,"line":141},[52,592,195],{"class":62},[329,594,596],{"id":595},"app-layout-fixed-sidebar-fluid-content","App layout — fixed sidebar + fluid content",[40,598,599],{"language":42},[44,600,602],{"className":46,"code":601,"language":42,"meta":48,"style":48},".app { display: flex; min-block-size: 100dvh; }\n.sidebar { flex: 0 0 250px; }  \u002F* fixed 250px, no grow\u002Fshrink *\u002F\n.content { flex: 1; min-width: 0; }  \u002F* fill remaining, allow shrinking below content *\u002F\n",[18,603,604,630,654],{"__ignoreMap":48},[52,605,606,609,611,613,615,617,619,622,624,626,628],{"class":54,"line":55},[52,607,608],{"class":58},".app",[52,610,227],{"class":62},[52,612,393],{"class":69},[52,614,73],{"class":62},[52,616,76],{"class":69},[52,618,152],{"class":62},[52,620,621],{"class":69},"min-block-size",[52,623,73],{"class":62},[52,625,579],{"class":69},[52,627,582],{"class":131},[52,629,400],{"class":62},[52,631,632,635,637,639,641,643,645,647,649,651],{"class":54,"line":66},[52,633,634],{"class":58},".sidebar",[52,636,227],{"class":62},[52,638,76],{"class":69},[52,640,73],{"class":62},[52,642,289],{"class":69},[52,644,292],{"class":69},[52,646,295],{"class":69},[52,648,298],{"class":131},[52,650,415],{"class":62},[52,652,653],{"class":82},"\u002F* fixed 250px, no grow\u002Fshrink *\u002F\n",[52,655,656,659,661,663,665,667,669,671,673,675,677],{"class":54,"line":86},[52,657,658],{"class":58},".content",[52,660,227],{"class":62},[52,662,76],{"class":69},[52,664,73],{"class":62},[52,666,128],{"class":69},[52,668,152],{"class":62},[52,670,472],{"class":69},[52,672,73],{"class":62},[52,674,289],{"class":69},[52,676,415],{"class":62},[52,678,679],{"class":82},"\u002F* fill remaining, allow shrinking below content *\u002F\n",[329,681,683],{"id":682},"navbar-logo-left-links-right","Navbar — logo left, links right",[40,685,686],{"language":42},[44,687,689],{"className":46,"code":688,"language":42,"meta":48,"style":48},".nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }\n",[18,690,691],{"__ignoreMap":48},[52,692,693,696,698,700,702,704,706,709,711,713,715,718,720,722,724,726,728,730,732],{"class":54,"line":55},[52,694,695],{"class":58},".nav",[52,697,227],{"class":62},[52,699,393],{"class":69},[52,701,73],{"class":62},[52,703,76],{"class":69},[52,705,152],{"class":62},[52,707,708],{"class":69},"justify-content",[52,710,73],{"class":62},[52,712,149],{"class":69},[52,714,152],{"class":62},[52,716,717],{"class":69},"align-items",[52,719,73],{"class":62},[52,721,166],{"class":69},[52,723,152],{"class":62},[52,725,447],{"class":69},[52,727,73],{"class":62},[52,729,128],{"class":69},[52,731,132],{"class":131},[52,733,400],{"class":62},[329,735,737],{"id":736},"responsive-card-grid-wrapping","Responsive card grid (wrapping)",[40,739,740],{"language":42},[44,741,743],{"className":46,"code":742,"language":42,"meta":48,"style":48},".cards { display: flex; flex-wrap: wrap; gap: 1rem; }\n.card { flex: 1 1 300px; min-width: 0; }  \u002F* grow\u002Fshrink, base 300px, wraps when no room *\u002F\n",[18,744,745,779],{"__ignoreMap":48},[52,746,747,750,752,754,756,758,760,763,765,767,769,771,773,775,777],{"class":54,"line":55},[52,748,749],{"class":58},".cards",[52,751,227],{"class":62},[52,753,393],{"class":69},[52,755,73],{"class":62},[52,757,76],{"class":69},[52,759,152],{"class":62},[52,761,762],{"class":69},"flex-wrap",[52,764,73],{"class":62},[52,766,111],{"class":69},[52,768,152],{"class":62},[52,770,447],{"class":69},[52,772,73],{"class":62},[52,774,128],{"class":69},[52,776,132],{"class":131},[52,778,400],{"class":62},[52,780,781,784,786,788,790,792,794,797,799,801,803,805,807,809],{"class":54,"line":66},[52,782,783],{"class":58},".card",[52,785,227],{"class":62},[52,787,76],{"class":69},[52,789,73],{"class":62},[52,791,128],{"class":69},[52,793,319],{"class":69},[52,795,796],{"class":69}," 300",[52,798,298],{"class":131},[52,800,152],{"class":62},[52,802,472],{"class":69},[52,804,73],{"class":62},[52,806,289],{"class":69},[52,808,415],{"class":62},[52,810,811],{"class":82},"\u002F* grow\u002Fshrink, base 300px, wraps when no room *\u002F\n",[35,813,815,818],{"id":814},"order-visual-reordering-accessibility-caveat",[18,816,817],{},"order"," — visual reordering (accessibility caveat)",[40,820,821],{"language":42},[44,822,824],{"className":46,"code":823,"language":42,"meta":48,"style":48},".item { order: -1; }  \u002F* moves FIRST visually. ⚠️ DOM order (tab order, screen readers) is UNCHANGED. *\u002F\n\u002F* Never use `order` for meaningful reordering — it decouples visual from a11y order. Use the DOM. *\u002F\n",[18,825,826,844],{"__ignoreMap":48},[52,827,828,830,832,834,836,839,841],{"class":54,"line":55},[52,829,224],{"class":58},[52,831,227],{"class":62},[52,833,817],{"class":69},[52,835,73],{"class":62},[52,837,838],{"class":69},"-1",[52,840,415],{"class":62},[52,842,843],{"class":82},"\u002F* moves FIRST visually. ⚠️ DOM order (tab order, screen readers) is UNCHANGED. *\u002F\n",[52,845,846],{"class":54,"line":66},[52,847,848],{"class":82},"\u002F* Never use `order` for meaningful reordering — it decouples visual from a11y order. Use the DOM. *\u002F\n",[35,850,852],{"id":851},"tips-tricks","💡 Tips & Tricks",[854,855,856,877,907,918],"ul",{},[857,858,859,73,862,864,865,868,869,872,873,876],"li",{},[495,860,861],{},"Idiom",[18,863,447],{}," replaces every flex spacing hack — no ",[18,866,867],{},"margin"," + ",[18,870,871],{},":not(:last-child)",", no trailing-gap-on-wrap bug. ",[18,874,875],{},"gap: 1rem"," is correct on every line after wrapping.",[857,878,879,881,882,884,885,887,888,887,891,894,895,897,898,897,900,902,903,906],{},[495,880,861],{},": use the ",[18,883,76],{}," shorthand (",[18,886,334],{},", ",[18,889,890],{},"flex: 0 0 250px",[18,892,893],{},"flex: none",") — never individual ",[18,896,20],{},"\u002F",[18,899,24],{},[18,901,28],{},". The shorthand is clearer and avoids the ",[18,904,905],{},"flex-basis: auto"," default surprise.",[857,908,909,73,911,914,915,917],{},[495,910,861],{},[18,912,913],{},"flex: 0 0 \u003Csize>"," for fixed-width items + ",[18,916,334],{}," for fluid content — the app-layout pattern. Fixed sidebar, fluid main area.",[857,919,920,73,922,925,926,928],{},[495,921,861],{},[18,923,924],{},"align-items: baseline"," for aligning items by text baseline — buttons with different font sizes align by text, not by box edge. Better than ",[18,927,166],{}," for mixed-content rows.",[35,930,932],{"id":931},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[854,934,935,960,977,991,1009,1017],{},[857,936,937,948,949,952,953,955,956,959],{},[495,938,939,941,942,897,945],{},[18,940,905],{}," uses ",[18,943,944],{},"width",[18,946,947],{},"height",": if you set ",[18,950,951],{},"width: 200px"," and ",[18,954,905],{},", the basis is 200px. If ",[18,957,958],{},"flex-basis: 0%",", the width is ignored (basis is 0).",[857,961,962,968,969,972,973,976],{},[495,963,964,967],{},[18,965,966],{},"align-items: stretch"," (default) distorts images",": images stretch to fill the cross axis. Set ",[18,970,971],{},"align-items: flex-start"," or ",[18,974,975],{},"align-self: start"," on the image.",[857,978,979,984,985,987,988,990],{},[495,980,981,983],{},[18,982,708],{}," is a no-op when items fill the container",": if ",[18,986,334],{}," items fill the space, there's no free space to distribute. ",[18,989,708],{}," only matters when items are smaller than the container.",[857,992,993,999,1000,1002,1003,972,1006,1008],{},[495,994,995,998],{},[18,996,997],{},"flex-wrap: nowrap"," (default) overflows",": items shrink to fit, but ",[18,1001,32],{}," or unbreakable content causes overflow. Use ",[18,1004,1005],{},"flex-wrap: wrap",[18,1007,504],{},".",[857,1010,1011,1016],{},[495,1012,1013,1015],{},[18,1014,447],{}," in flexbox needs Safari 14.1+"," (2021). Modern projects can assume support; for legacy, use margins.",[857,1018,1019,1022,1023,1026],{},[495,1020,1021],{},"Nested flex containers compose",": a flex item can be ",[18,1024,1025],{},"display: flex"," itself — flex row of flex columns is the building block for complex layouts.",[35,1028,1030],{"id":1029},"spot-the-bug","🧠 Spot the Bug",[40,1032,1033],{"language":42},[44,1034,1036],{"className":46,"code":1035,"language":42,"meta":48,"style":48},".row { display: flex; }\n.item { flex: 1; }\n",[18,1037,1038,1052],{"__ignoreMap":48},[52,1039,1040,1042,1044,1046,1048,1050],{"class":54,"line":55},[52,1041,388],{"class":58},[52,1043,227],{"class":62},[52,1045,393],{"class":69},[52,1047,73],{"class":62},[52,1049,76],{"class":69},[52,1051,400],{"class":62},[52,1053,1054,1056,1058,1060,1062,1064],{"class":54,"line":66},[52,1055,224],{"class":58},[52,1057,227],{"class":62},[52,1059,76],{"class":69},[52,1061,73],{"class":62},[52,1063,128],{"class":69},[52,1065,400],{"class":62},[1067,1068,1069,1073],"details",{},[1070,1071,1072],"summary",{},"Answer",[14,1074,1075,1076,1078,1079,1081,1082,1084,1085,1088,1089,1008],{},"Flex items have ",[18,1077,32],{}," by default — they won't shrink below their content's intrinsic minimum (a long word, URL, or unbreakable string). An item with long content overflows the row even with ",[18,1080,334],{},". Fix: ",[18,1083,504],{}," (override the content floor) + ",[18,1086,1087],{},"overflow-wrap: break-word"," (let text break). This is the #1 flexbox bug — \"my flex items won't shrink\" is almost always ",[18,1090,32],{},[1092,1093,1094],"style",{},"html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}",{"title":48,"searchDepth":66,"depth":66,"links":1096},[1097,1098,1103,1107,1113,1115,1116,1117],{"id":37,"depth":66,"text":38},{"id":198,"depth":66,"text":1099,"children":1100},"The flex Algorithm — grow, shrink, basis",[1101],{"id":331,"depth":86,"text":1102},"flex: 1 vs flex: 1 1 auto — the basis distinction",{"id":364,"depth":66,"text":1104,"children":1105},"min-width: auto — the flexbox layout killer",[1106],{"id":370,"depth":86,"text":371},{"id":511,"depth":66,"text":512,"children":1108},[1109,1110,1111,1112],{"id":515,"depth":86,"text":516},{"id":595,"depth":86,"text":596},{"id":682,"depth":86,"text":683},{"id":736,"depth":86,"text":737},{"id":814,"depth":66,"text":1114},"order — visual reordering (accessibility caveat)",{"id":851,"depth":66,"text":852},{"id":931,"depth":66,"text":932},{"id":1029,"depth":66,"text":1030},"Flex-grow\u002Fshrink\u002Fbasis resolution, the min-width:auto trap, gap, alignment axes, and the flex shorthand production patterns. Code-first reference with app-layout and centering systems.","md",{},true,"\u002Fcss\u002F07-flexbox",{"title":5,"description":1118},"css\u002F07-flexbox","pABbxsDcoKeNGOPhWJqrE9dui-62c8Npn26bMsMs0LA",1789924644820]