[{"data":1,"prerenderedAt":1981},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow\u002F":3,"content-all-pages":1720},{"id":4,"title":5,"body":6,"description":1702,"extension":1703,"meta":1704,"navigation":451,"path":1716,"seo":1717,"stem":1718,"__hash__":1719},"content\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow\u002Findex.md","The min-width: auto Trap in Flex and Grid Layouts",{"type":7,"value":8,"toc":1691},"minimark",[9,13,18,46,50,77,80,92,95,98,102,194,197,201,205,1292,1296,1313,1332,1359,1361,1365,1380,1564,1575,1579,1585,1589,1604,1615,1636,1645,1649,1688],[10,11,5],"h1",{"id":12},"the-min-width-auto-trap-in-flex-and-grid-layouts",[14,15,17],"h2",{"id":16},"the-narrow-problem","The narrow problem",[19,20,21,22,26,27,30,31,34,35,40,41,45],"p",{},"A two-column layout — flexible main area, fixed sidebar — works perfectly until someone pastes a long URL, a git hash, or a code block into the main column. Now the whole page has a horizontal scrollbar, the sidebar is shoved half off screen, and ",[23,24,25],"code",{},"flex-shrink",", ",[23,28,29],{},"max-width: 100%",", and ",[23,32,33],{},"width: 100%"," all fail to help. Nothing in your CSS says the column should be that wide. The width is coming from a default you never wrote: the automatic minimum size that flex and grid items get for free. This is the most common responsive layout bug there is, it has a one-line fix, and the fix is unmemorable unless you understand where the floor comes from. This page is part of ",[36,37,39],"a",{"href":38},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002F","Intrinsic Sizing Techniques"," within ",[36,42,44],{"href":43},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts",".",[14,47,49],{"id":48},"why-the-default-exists","Why the default exists",[19,51,52,53,56,57,60,61,63,64,68,69,72,73,45],{},"The initial value of ",[23,54,55],{},"min-width"," is ",[23,58,59],{},"auto",", and for a block box in normal flow that means zero. For a flex item, and for a grid item in a track with an automatic minimum, ",[23,62,59],{}," means something else entirely: the ",[65,66,67],"strong",{},"automatic minimum size",", which resolves to the item's content-based minimum — broadly, the ",[23,70,71],{},"min-content"," size of what is inside, as defined in the discussion of ",[36,74,76],{"href":75},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained\u002F","min-content, max-content, and fit-content()",[19,78,79],{},"That default is a safety rail, and on balance a good one. Without it, a flex row of shrinkable items would happily crush every item to zero width the instant the container got tight, and you would have a layout that silently deletes its own content rather than one that visibly overflows. The specification chose the failure you can see over the failure you cannot. The overflow is loud precisely so you will notice and make a decision.",[19,81,82,83,87,88,91],{},"The decision it wants from you is: ",[84,85,86],"em",{},"what should happen when this item's content is wider than its share of the row?"," There are only three sensible answers — wrap it, scroll it, or clip it — and each of them requires you to override the floor, because the floor is what prevents the box from being small enough for any of them to engage. ",[23,89,90],{},"min-width: 0"," says \"I have handled it\". That is the whole mental model.",[19,93,94],{},"Reaching for JavaScript here is a trap of its own: truncating strings in script means the truncation is wrong after every resize and font load, and it destroys the text for copy-paste and for assistive technology. The CSS answer keeps the full string in the DOM and lets the engine decide how much of it is visible.",[96,97],"hr",{},[14,99,101],{"id":100},"seeing-the-floor","Seeing the floor",[103,104,110,111,110,115,110,119,110,126,110,132,110,141,110,147,110,153,110,159,110,164,110,169,110,173,110,176,110,180,110,183,110,187,110,190],"svg",{"viewBox":105,"role":106,"ariaLabel":107,"xmlns":108,"style":109},"0 0 720 300","img","A flex row overflowing its parent under the automatic minimum size, and the same row fitting after min-width zero","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[112,113,114],"title",{},"Automatic minimum size versus min-width: 0",[116,117,118],"desc",{},"The upper flex row has a main column that extends past its parent's border because its automatic minimum is its content width; the lower row fits inside the parent after the minimum is released.",[120,121,125],"text",{"x":122,"y":123,"style":124},"360","28","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","the same row, before and after the override",[120,127,131],{"x":128,"y":129,"style":130},"40","60","text-anchor:start;fill:currentColor;font:13px ui-monospace,monospace","broken",[133,134],"rect",{"x":128,"y":135,"width":136,"height":135,"rx":137,"fill":138,"stroke":139,"strokeWidth":140},"70","560","8","none","#7aa2ff","2",[133,142],{"x":143,"y":144,"width":136,"height":143,"rx":145,"fill":139,"opacity":146},"50","80","6","0.2",[133,148],{"x":149,"y":144,"width":144,"height":143,"rx":145,"fill":138,"stroke":150,"strokeWidth":151,"opacity":152},"620","currentColor","1.5","0.55",[120,154,158],{"x":155,"y":156,"style":157},"330","110","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace","min-width: auto",[120,160,163],{"x":161,"y":156,"style":162},"660","text-anchor:middle;fill:currentColor;font:11px sans-serif;opacity:0.75","aside",[120,165,168],{"x":122,"y":166,"style":167},"164","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.7","the item cannot shrink, so it pushes past the parent border",[120,170,172],{"x":128,"y":171,"style":130},"186","fixed",[133,174],{"x":128,"y":175,"width":136,"height":135,"rx":137,"fill":138,"stroke":139,"strokeWidth":140},"196",[133,177],{"x":143,"y":178,"width":179,"height":143,"rx":145,"fill":139,"opacity":146},"206","450",[133,181],{"x":182,"y":178,"width":144,"height":143,"rx":145,"fill":138,"stroke":150,"strokeWidth":151,"opacity":152},"510",[120,184,90],{"x":185,"y":186,"style":157},"275","236",[120,188,163],{"x":189,"y":186,"style":162},"550",[120,191,193],{"x":122,"y":192,"style":167},"290","the floor is gone, so the content scrolls or wraps inside its column",[19,195,196],{},"The demo below is the two cases side by side. Drag the frame narrower: the top row breaks out of its accent border, the bottom row keeps its columns intact and the code line gains its own scrollbar.",[198,199],"live-demo",{"name":200},"lp-min-width-auto-overflow",[14,202,204],{"id":203},"complete-working-implementation","Complete working implementation",[206,207,212],"pre",{"className":208,"code":209,"language":210,"meta":211,"style":211},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!doctype html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"utf-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u003Ctitle>min-width: auto overflow, broken and fixed\u003C\u002Ftitle>\n\u003Cstyle>\n  body { font: 16px\u002F1.4 system-ui, sans-serif; margin: 2rem; color: #1c2430; }\n  .head { margin: 0 0 0.5rem; font: 0.75rem ui-monospace, monospace; color: #666; }\n\n  .row {\n    display: flex;\n    gap: 0.6rem;\n    border: 2px solid #7aa2ff;   \u002F* the boundary the content should respect *\u002F\n    padding: 0.5rem;\n    margin-bottom: 1.5rem;\n  }\n\n  .main { flex: 1; }             \u002F* grows and is allowed to shrink — in theory *\u002F\n\n  .side {\n    flex: 0 0 6rem;\n    display: grid;\n    place-items: center;\n    border: 1px solid #d4dbe8;\n    border-radius: 6px;\n    font-size: 0.8rem;\n    color: #5a6472;\n  }\n\n  .code {\n    margin: 0;\n    padding: 0.5rem;\n    font: 0.75rem ui-monospace, monospace;\n    background: #f4f6fb;\n    border: 1px solid #d4dbe8;\n    border-radius: 6px;\n    overflow-x: auto;            \u002F* only reachable once the parent can shrink *\u002F\n  }\n\n  \u002F* Broken: min-width resolves to the automatic minimum size, which is the\n     min-content width of the \u003Cpre>. A \u003Cpre> never wraps, so that is the\n     entire line, and flex-shrink is forbidden from going below it. *\u002F\n  .row--broken .main { min-width: auto; }\n\n  \u002F* Fixed: an explicit zero replaces the automatic minimum, so the item can\n     shrink to its flex share and .code scrolls within it. *\u002F\n  .row--fixed .main { min-width: 0; }\n\n  \u002F* Equivalent grid statement of the same problem.\n     A bare 1fr track has an automatic minimum of auto; minmax(0, 1fr) does not. *\u002F\n  .grid-broken { display: grid; grid-template-columns: 1fr 6rem; gap: 0.6rem; }\n  .grid-fixed  { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: 0.6rem; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch2 class=\"head\">broken — min-width defaults to auto\u003C\u002Fh2>\n  \u003Cdiv class=\"row row--broken\">\n    \u003Cdiv class=\"main\">\n      \u003Cpre class=\"code\">fetch(\"\u002Fapi\u002Ftelemetry\u002Faggregate\u002Fwindow\u002F7d\u002Ftimezone\u002FUTC\")\u003C\u002Fpre>\n    \u003C\u002Fdiv>\n    \u003Caside class=\"side\">sidebar\u003C\u002Faside>\n  \u003C\u002Fdiv>\n\n  \u003Ch2 class=\"head\">fixed — min-width: 0 on the flex item\u003C\u002Fh2>\n  \u003Cdiv class=\"row row--fixed\">\n    \u003Cdiv class=\"main\">\n      \u003Cpre class=\"code\">fetch(\"\u002Fapi\u002Ftelemetry\u002Faggregate\u002Fwindow\u002F7d\u002Ftimezone\u002FUTC\")\u003C\u002Fpre>\n    \u003C\u002Fdiv>\n    \u003Caside class=\"side\">sidebar\u003C\u002Faside>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[23,213,214,234,254,264,282,307,321,331,393,446,453,462,476,491,516,531,545,551,556,577,582,590,609,621,634,652,666,681,694,699,704,712,724,737,757,770,787,800,816,821,826,832,838,844,863,868,874,880,898,903,909,915,959,1013,1023,1032,1042,1065,1082,1099,1121,1131,1152,1162,1167,1187,1203,1218,1237,1246,1265,1274,1283],{"__ignoreMap":211},[215,216,219,223,227,231],"span",{"class":217,"line":218},"line",1,[215,220,222],{"class":221},"suds8","\u003C!",[215,224,226],{"class":225},"sne4z","doctype",[215,228,230],{"class":229},"s-5SL"," html",[215,232,233],{"class":221},">\n",[215,235,237,240,242,245,248,252],{"class":217,"line":236},2,[215,238,239],{"class":221},"\u003C",[215,241,210],{"class":225},[215,243,244],{"class":229}," lang",[215,246,247],{"class":221},"=",[215,249,251],{"class":250},"sT6z2","\"en\"",[215,253,233],{"class":221},[215,255,257,259,262],{"class":217,"line":256},3,[215,258,239],{"class":221},[215,260,261],{"class":225},"head",[215,263,233],{"class":221},[215,265,267,269,272,275,277,280],{"class":217,"line":266},4,[215,268,239],{"class":221},[215,270,271],{"class":225},"meta",[215,273,274],{"class":229}," charset",[215,276,247],{"class":221},[215,278,279],{"class":250},"\"utf-8\"",[215,281,233],{"class":221},[215,283,285,287,289,292,294,297,300,302,305],{"class":217,"line":284},5,[215,286,239],{"class":221},[215,288,271],{"class":225},[215,290,291],{"class":229}," name",[215,293,247],{"class":221},[215,295,296],{"class":250},"\"viewport\"",[215,298,299],{"class":229}," content",[215,301,247],{"class":221},[215,303,304],{"class":250},"\"width=device-width, initial-scale=1\"",[215,306,233],{"class":221},[215,308,310,312,314,317,319],{"class":217,"line":309},6,[215,311,239],{"class":221},[215,313,112],{"class":225},[215,315,316],{"class":221},">min-width: auto overflow, broken and fixed\u003C\u002F",[215,318,112],{"class":225},[215,320,233],{"class":221},[215,322,324,326,329],{"class":217,"line":323},7,[215,325,239],{"class":221},[215,327,328],{"class":225},"style",[215,330,233],{"class":221},[215,332,334,337,340,343,346,349,353,356,359,362,364,367,370,373,375,377,380,382,385,387,390],{"class":217,"line":333},8,[215,335,336],{"class":225},"  body",[215,338,339],{"class":221}," { ",[215,341,342],{"class":229},"font",[215,344,345],{"class":221},": ",[215,347,348],{"class":229},"16",[215,350,352],{"class":351},"sHUrx","px",[215,354,355],{"class":221},"\u002F",[215,357,358],{"class":229},"1.4",[215,360,361],{"class":229}," system-ui",[215,363,26],{"class":221},[215,365,366],{"class":229},"sans-serif",[215,368,369],{"class":221},"; ",[215,371,372],{"class":229},"margin",[215,374,345],{"class":221},[215,376,140],{"class":229},[215,378,379],{"class":351},"rem",[215,381,369],{"class":221},[215,383,384],{"class":229},"color",[215,386,345],{"class":221},[215,388,389],{"class":229},"#1c2430",[215,391,392],{"class":221},"; }\n",[215,394,396,399,401,403,405,408,411,414,416,418,420,422,425,427,430,432,435,437,439,441,444],{"class":217,"line":395},9,[215,397,398],{"class":229},"  .head",[215,400,339],{"class":221},[215,402,372],{"class":229},[215,404,345],{"class":221},[215,406,407],{"class":229},"0",[215,409,410],{"class":229}," 0",[215,412,413],{"class":229}," 0.5",[215,415,379],{"class":351},[215,417,369],{"class":221},[215,419,342],{"class":229},[215,421,345],{"class":221},[215,423,424],{"class":229},"0.75",[215,426,379],{"class":351},[215,428,429],{"class":229}," ui-monospace",[215,431,26],{"class":221},[215,433,434],{"class":229},"monospace",[215,436,369],{"class":221},[215,438,384],{"class":229},[215,440,345],{"class":221},[215,442,443],{"class":229},"#666",[215,445,392],{"class":221},[215,447,449],{"class":217,"line":448},10,[215,450,452],{"emptyLinePlaceholder":451},true,"\n",[215,454,456,459],{"class":217,"line":455},11,[215,457,458],{"class":229},"  .row",[215,460,461],{"class":221}," {\n",[215,463,465,468,470,473],{"class":217,"line":464},12,[215,466,467],{"class":229},"    display",[215,469,345],{"class":221},[215,471,472],{"class":229},"flex",[215,474,475],{"class":221},";\n",[215,477,479,482,484,487,489],{"class":217,"line":478},13,[215,480,481],{"class":229},"    gap",[215,483,345],{"class":221},[215,485,486],{"class":229},"0.6",[215,488,379],{"class":351},[215,490,475],{"class":221},[215,492,494,497,499,501,503,506,509,512],{"class":217,"line":493},14,[215,495,496],{"class":229},"    border",[215,498,345],{"class":221},[215,500,140],{"class":229},[215,502,352],{"class":351},[215,504,505],{"class":229}," solid",[215,507,508],{"class":229}," #7aa2ff",[215,510,511],{"class":221},";   ",[215,513,515],{"class":514},"sLBg1","\u002F* the boundary the content should respect *\u002F\n",[215,517,519,522,524,527,529],{"class":217,"line":518},15,[215,520,521],{"class":229},"    padding",[215,523,345],{"class":221},[215,525,526],{"class":229},"0.5",[215,528,379],{"class":351},[215,530,475],{"class":221},[215,532,534,537,539,541,543],{"class":217,"line":533},16,[215,535,536],{"class":229},"    margin-bottom",[215,538,345],{"class":221},[215,540,151],{"class":229},[215,542,379],{"class":351},[215,544,475],{"class":221},[215,546,548],{"class":217,"line":547},17,[215,549,550],{"class":221},"  }\n",[215,552,554],{"class":217,"line":553},18,[215,555,452],{"emptyLinePlaceholder":451},[215,557,559,562,564,566,568,571,574],{"class":217,"line":558},19,[215,560,561],{"class":229},"  .main",[215,563,339],{"class":221},[215,565,472],{"class":229},[215,567,345],{"class":221},[215,569,570],{"class":229},"1",[215,572,573],{"class":221},"; }             ",[215,575,576],{"class":514},"\u002F* grows and is allowed to shrink — in theory *\u002F\n",[215,578,580],{"class":217,"line":579},20,[215,581,452],{"emptyLinePlaceholder":451},[215,583,585,588],{"class":217,"line":584},21,[215,586,587],{"class":229},"  .side",[215,589,461],{"class":221},[215,591,593,596,598,600,602,605,607],{"class":217,"line":592},22,[215,594,595],{"class":229},"    flex",[215,597,345],{"class":221},[215,599,407],{"class":229},[215,601,410],{"class":229},[215,603,604],{"class":229}," 6",[215,606,379],{"class":351},[215,608,475],{"class":221},[215,610,612,614,616,619],{"class":217,"line":611},23,[215,613,467],{"class":229},[215,615,345],{"class":221},[215,617,618],{"class":229},"grid",[215,620,475],{"class":221},[215,622,624,627,629,632],{"class":217,"line":623},24,[215,625,626],{"class":229},"    place-items",[215,628,345],{"class":221},[215,630,631],{"class":229},"center",[215,633,475],{"class":221},[215,635,637,639,641,643,645,647,650],{"class":217,"line":636},25,[215,638,496],{"class":229},[215,640,345],{"class":221},[215,642,570],{"class":229},[215,644,352],{"class":351},[215,646,505],{"class":229},[215,648,649],{"class":229}," #d4dbe8",[215,651,475],{"class":221},[215,653,655,658,660,662,664],{"class":217,"line":654},26,[215,656,657],{"class":229},"    border-radius",[215,659,345],{"class":221},[215,661,145],{"class":229},[215,663,352],{"class":351},[215,665,475],{"class":221},[215,667,669,672,674,677,679],{"class":217,"line":668},27,[215,670,671],{"class":229},"    font-size",[215,673,345],{"class":221},[215,675,676],{"class":229},"0.8",[215,678,379],{"class":351},[215,680,475],{"class":221},[215,682,684,687,689,692],{"class":217,"line":683},28,[215,685,686],{"class":229},"    color",[215,688,345],{"class":221},[215,690,691],{"class":229},"#5a6472",[215,693,475],{"class":221},[215,695,697],{"class":217,"line":696},29,[215,698,550],{"class":221},[215,700,702],{"class":217,"line":701},30,[215,703,452],{"emptyLinePlaceholder":451},[215,705,707,710],{"class":217,"line":706},31,[215,708,709],{"class":229},"  .code",[215,711,461],{"class":221},[215,713,715,718,720,722],{"class":217,"line":714},32,[215,716,717],{"class":229},"    margin",[215,719,345],{"class":221},[215,721,407],{"class":229},[215,723,475],{"class":221},[215,725,727,729,731,733,735],{"class":217,"line":726},33,[215,728,521],{"class":229},[215,730,345],{"class":221},[215,732,526],{"class":229},[215,734,379],{"class":351},[215,736,475],{"class":221},[215,738,740,743,745,747,749,751,753,755],{"class":217,"line":739},34,[215,741,742],{"class":229},"    font",[215,744,345],{"class":221},[215,746,424],{"class":229},[215,748,379],{"class":351},[215,750,429],{"class":229},[215,752,26],{"class":221},[215,754,434],{"class":229},[215,756,475],{"class":221},[215,758,760,763,765,768],{"class":217,"line":759},35,[215,761,762],{"class":229},"    background",[215,764,345],{"class":221},[215,766,767],{"class":229},"#f4f6fb",[215,769,475],{"class":221},[215,771,773,775,777,779,781,783,785],{"class":217,"line":772},36,[215,774,496],{"class":229},[215,776,345],{"class":221},[215,778,570],{"class":229},[215,780,352],{"class":351},[215,782,505],{"class":229},[215,784,649],{"class":229},[215,786,475],{"class":221},[215,788,790,792,794,796,798],{"class":217,"line":789},37,[215,791,657],{"class":229},[215,793,345],{"class":221},[215,795,145],{"class":229},[215,797,352],{"class":351},[215,799,475],{"class":221},[215,801,803,806,808,810,813],{"class":217,"line":802},38,[215,804,805],{"class":229},"    overflow-x",[215,807,345],{"class":221},[215,809,59],{"class":229},[215,811,812],{"class":221},";            ",[215,814,815],{"class":514},"\u002F* only reachable once the parent can shrink *\u002F\n",[215,817,819],{"class":217,"line":818},39,[215,820,550],{"class":221},[215,822,824],{"class":217,"line":823},40,[215,825,452],{"emptyLinePlaceholder":451},[215,827,829],{"class":217,"line":828},41,[215,830,831],{"class":514},"  \u002F* Broken: min-width resolves to the automatic minimum size, which is the\n",[215,833,835],{"class":217,"line":834},42,[215,836,837],{"class":514},"     min-content width of the \u003Cpre>. A \u003Cpre> never wraps, so that is the\n",[215,839,841],{"class":217,"line":840},43,[215,842,843],{"class":514},"     entire line, and flex-shrink is forbidden from going below it. *\u002F\n",[215,845,847,850,853,855,857,859,861],{"class":217,"line":846},44,[215,848,849],{"class":229},"  .row--broken",[215,851,852],{"class":229}," .main",[215,854,339],{"class":221},[215,856,55],{"class":229},[215,858,345],{"class":221},[215,860,59],{"class":229},[215,862,392],{"class":221},[215,864,866],{"class":217,"line":865},45,[215,867,452],{"emptyLinePlaceholder":451},[215,869,871],{"class":217,"line":870},46,[215,872,873],{"class":514},"  \u002F* Fixed: an explicit zero replaces the automatic minimum, so the item can\n",[215,875,877],{"class":217,"line":876},47,[215,878,879],{"class":514},"     shrink to its flex share and .code scrolls within it. *\u002F\n",[215,881,883,886,888,890,892,894,896],{"class":217,"line":882},48,[215,884,885],{"class":229},"  .row--fixed",[215,887,852],{"class":229},[215,889,339],{"class":221},[215,891,55],{"class":229},[215,893,345],{"class":221},[215,895,407],{"class":229},[215,897,392],{"class":221},[215,899,901],{"class":217,"line":900},49,[215,902,452],{"emptyLinePlaceholder":451},[215,904,906],{"class":217,"line":905},50,[215,907,908],{"class":514},"  \u002F* Equivalent grid statement of the same problem.\n",[215,910,912],{"class":217,"line":911},51,[215,913,914],{"class":514},"     A bare 1fr track has an automatic minimum of auto; minmax(0, 1fr) does not. *\u002F\n",[215,916,918,921,923,926,928,930,932,935,937,939,942,944,946,948,951,953,955,957],{"class":217,"line":917},52,[215,919,920],{"class":229},"  .grid-broken",[215,922,339],{"class":221},[215,924,925],{"class":229},"display",[215,927,345],{"class":221},[215,929,618],{"class":229},[215,931,369],{"class":221},[215,933,934],{"class":229},"grid-template-columns",[215,936,345],{"class":221},[215,938,570],{"class":229},[215,940,941],{"class":351},"fr",[215,943,604],{"class":229},[215,945,379],{"class":351},[215,947,369],{"class":221},[215,949,950],{"class":229},"gap",[215,952,345],{"class":221},[215,954,486],{"class":229},[215,956,379],{"class":351},[215,958,392],{"class":221},[215,960,962,965,968,970,972,974,976,978,980,983,986,988,990,992,994,997,999,1001,1003,1005,1007,1009,1011],{"class":217,"line":961},53,[215,963,964],{"class":229},"  .grid-fixed",[215,966,967],{"class":221},"  { ",[215,969,925],{"class":229},[215,971,345],{"class":221},[215,973,618],{"class":229},[215,975,369],{"class":221},[215,977,934],{"class":229},[215,979,345],{"class":221},[215,981,982],{"class":229},"minmax",[215,984,985],{"class":221},"(",[215,987,407],{"class":229},[215,989,26],{"class":221},[215,991,570],{"class":229},[215,993,941],{"class":351},[215,995,996],{"class":221},") ",[215,998,145],{"class":229},[215,1000,379],{"class":351},[215,1002,369],{"class":221},[215,1004,950],{"class":229},[215,1006,345],{"class":221},[215,1008,486],{"class":229},[215,1010,379],{"class":351},[215,1012,392],{"class":221},[215,1014,1016,1019,1021],{"class":217,"line":1015},54,[215,1017,1018],{"class":221},"\u003C\u002F",[215,1020,328],{"class":225},[215,1022,233],{"class":221},[215,1024,1026,1028,1030],{"class":217,"line":1025},55,[215,1027,1018],{"class":221},[215,1029,261],{"class":225},[215,1031,233],{"class":221},[215,1033,1035,1037,1040],{"class":217,"line":1034},56,[215,1036,239],{"class":221},[215,1038,1039],{"class":225},"body",[215,1041,233],{"class":221},[215,1043,1045,1048,1050,1053,1055,1058,1061,1063],{"class":217,"line":1044},57,[215,1046,1047],{"class":221},"  \u003C",[215,1049,14],{"class":225},[215,1051,1052],{"class":229}," class",[215,1054,247],{"class":221},[215,1056,1057],{"class":250},"\"head\"",[215,1059,1060],{"class":221},">broken — min-width defaults to auto\u003C\u002F",[215,1062,14],{"class":225},[215,1064,233],{"class":221},[215,1066,1068,1070,1073,1075,1077,1080],{"class":217,"line":1067},58,[215,1069,1047],{"class":221},[215,1071,1072],{"class":225},"div",[215,1074,1052],{"class":229},[215,1076,247],{"class":221},[215,1078,1079],{"class":250},"\"row row--broken\"",[215,1081,233],{"class":221},[215,1083,1085,1088,1090,1092,1094,1097],{"class":217,"line":1084},59,[215,1086,1087],{"class":221},"    \u003C",[215,1089,1072],{"class":225},[215,1091,1052],{"class":229},[215,1093,247],{"class":221},[215,1095,1096],{"class":250},"\"main\"",[215,1098,233],{"class":221},[215,1100,1102,1105,1107,1109,1111,1114,1117,1119],{"class":217,"line":1101},60,[215,1103,1104],{"class":221},"      \u003C",[215,1106,206],{"class":225},[215,1108,1052],{"class":229},[215,1110,247],{"class":221},[215,1112,1113],{"class":250},"\"code\"",[215,1115,1116],{"class":221},">fetch(\"\u002Fapi\u002Ftelemetry\u002Faggregate\u002Fwindow\u002F7d\u002Ftimezone\u002FUTC\")\u003C\u002F",[215,1118,206],{"class":225},[215,1120,233],{"class":221},[215,1122,1124,1127,1129],{"class":217,"line":1123},61,[215,1125,1126],{"class":221},"    \u003C\u002F",[215,1128,1072],{"class":225},[215,1130,233],{"class":221},[215,1132,1134,1136,1138,1140,1142,1145,1148,1150],{"class":217,"line":1133},62,[215,1135,1087],{"class":221},[215,1137,163],{"class":225},[215,1139,1052],{"class":229},[215,1141,247],{"class":221},[215,1143,1144],{"class":250},"\"side\"",[215,1146,1147],{"class":221},">sidebar\u003C\u002F",[215,1149,163],{"class":225},[215,1151,233],{"class":221},[215,1153,1155,1158,1160],{"class":217,"line":1154},63,[215,1156,1157],{"class":221},"  \u003C\u002F",[215,1159,1072],{"class":225},[215,1161,233],{"class":221},[215,1163,1165],{"class":217,"line":1164},64,[215,1166,452],{"emptyLinePlaceholder":451},[215,1168,1170,1172,1174,1176,1178,1180,1183,1185],{"class":217,"line":1169},65,[215,1171,1047],{"class":221},[215,1173,14],{"class":225},[215,1175,1052],{"class":229},[215,1177,247],{"class":221},[215,1179,1057],{"class":250},[215,1181,1182],{"class":221},">fixed — min-width: 0 on the flex item\u003C\u002F",[215,1184,14],{"class":225},[215,1186,233],{"class":221},[215,1188,1190,1192,1194,1196,1198,1201],{"class":217,"line":1189},66,[215,1191,1047],{"class":221},[215,1193,1072],{"class":225},[215,1195,1052],{"class":229},[215,1197,247],{"class":221},[215,1199,1200],{"class":250},"\"row row--fixed\"",[215,1202,233],{"class":221},[215,1204,1206,1208,1210,1212,1214,1216],{"class":217,"line":1205},67,[215,1207,1087],{"class":221},[215,1209,1072],{"class":225},[215,1211,1052],{"class":229},[215,1213,247],{"class":221},[215,1215,1096],{"class":250},[215,1217,233],{"class":221},[215,1219,1221,1223,1225,1227,1229,1231,1233,1235],{"class":217,"line":1220},68,[215,1222,1104],{"class":221},[215,1224,206],{"class":225},[215,1226,1052],{"class":229},[215,1228,247],{"class":221},[215,1230,1113],{"class":250},[215,1232,1116],{"class":221},[215,1234,206],{"class":225},[215,1236,233],{"class":221},[215,1238,1240,1242,1244],{"class":217,"line":1239},69,[215,1241,1126],{"class":221},[215,1243,1072],{"class":225},[215,1245,233],{"class":221},[215,1247,1249,1251,1253,1255,1257,1259,1261,1263],{"class":217,"line":1248},70,[215,1250,1087],{"class":221},[215,1252,163],{"class":225},[215,1254,1052],{"class":229},[215,1256,247],{"class":221},[215,1258,1144],{"class":250},[215,1260,1147],{"class":221},[215,1262,163],{"class":225},[215,1264,233],{"class":221},[215,1266,1268,1270,1272],{"class":217,"line":1267},71,[215,1269,1157],{"class":221},[215,1271,1072],{"class":225},[215,1273,233],{"class":221},[215,1275,1277,1279,1281],{"class":217,"line":1276},72,[215,1278,1018],{"class":221},[215,1280,1039],{"class":225},[215,1282,233],{"class":221},[215,1284,1286,1288,1290],{"class":217,"line":1285},73,[215,1287,1018],{"class":221},[215,1289,210],{"class":225},[215,1291,233],{"class":221},[14,1293,1295],{"id":1294},"key-technique-where-to-put-the-override","Key technique: where to put the override",[19,1297,1298,1299,1302,1303,1305,1306,1309,1310,1312],{},"The override belongs on the ",[65,1300,1301],{},"flex or grid item",", not on the overflowing content and not on the container. That is the single most common misdiagnosis: people set ",[23,1304,90],{}," on the ",[23,1307,1308],{},"\u003Cpre>",", see no change, and conclude the fix does not work. The ",[23,1311,1308],{}," was never the constrained box — it is an ordinary block that would happily be any width. The constrained box is its flex-item ancestor, and that is where the floor lives.",[19,1314,1315,1316,1319,1320,1323,1324,1327,1328,1331],{},"Two consequences follow. First, in nested flex or grid structures the floor exists at ",[84,1317,1318],{},"every"," level, so a deeply wrapped column may need the override on more than one ancestor; walk up from the overflowing element until you reach the flex or grid container, and treat every item on that path. Second, the block-axis form is real too — ",[23,1321,1322],{},"min-height: auto"," produces the identical refusal in a ",[23,1325,1326],{},"flex-direction: column"," layout, where a scrollable panel inside a column flex container will not scroll until you set ",[23,1329,1330],{},"min-height: 0"," on it. The rule generalises: the automatic minimum applies to the flex item's main axis and to grid items in both axes.",[19,1333,1334,1335,1338,1339,26,1342,1344,1345,1348,1349,1351,1352,1354,1355,1358],{},"The ",[23,1336,1337],{},"overflow"," alternative works because a scroll container's automatic minimum is defined to be zero — the box has already declared how it handles excess content, so the safety rail is redundant. That makes ",[23,1340,1341],{},"overflow: hidden",[23,1343,59],{},", or ",[23,1346,1347],{},"clip"," a legitimate fix when you wanted that overflow behaviour anyway. Prefer ",[23,1350,90],{}," when you did not, since ",[23,1353,1341],{}," also clips focus rings and can trap ",[23,1356,1357],{},"position: sticky"," children.",[96,1360],{},[14,1362,1364],{"id":1363},"variation-the-grid-form-and-a-defensive-default","Variation: the grid form, and a defensive default",[19,1366,1367,1368,1371,1372,1375,1376,1379],{},"In grid the same floor is spelled into the track list. ",[23,1369,1370],{},"grid-template-columns: 1fr 20rem"," gives the ",[23,1373,1374],{},"1fr"," track an automatic minimum equal to its widest item's min-content size, which is why an ostensibly flexible track stops shrinking. ",[23,1377,1378],{},"minmax(0, 1fr)"," states the floor explicitly as zero.",[206,1381,1385],{"className":1382,"code":1383,"language":1384,"meta":211,"style":211},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F* App shell: content column must be allowed to become genuinely narrow. *\u002F\n.app {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 16rem;\n  gap: 1.5rem;\n}\n\n\u002F* Belt and braces for content you do not control (CMS bodies, user posts). *\u002F\n.prose {\n  min-width: 0;\n  overflow-wrap: break-word;   \u002F* break a long word rather than overflow *\u002F\n}\n.prose pre,\n.prose table {\n  display: block;\n  max-width: 100%;\n  overflow-x: auto;            \u002F* give wide blocks their own scroller *\u002F\n}\n","css",[23,1386,1387,1392,1399,1410,1437,1450,1455,1459,1464,1471,1482,1497,1501,1511,1520,1531,1546,1560],{"__ignoreMap":211},[215,1388,1389],{"class":217,"line":218},[215,1390,1391],{"class":514},"\u002F* App shell: content column must be allowed to become genuinely narrow. *\u002F\n",[215,1393,1394,1397],{"class":217,"line":236},[215,1395,1396],{"class":229},".app",[215,1398,461],{"class":221},[215,1400,1401,1404,1406,1408],{"class":217,"line":256},[215,1402,1403],{"class":229},"  display",[215,1405,345],{"class":221},[215,1407,618],{"class":229},[215,1409,475],{"class":221},[215,1411,1412,1415,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435],{"class":217,"line":266},[215,1413,1414],{"class":229},"  grid-template-columns",[215,1416,345],{"class":221},[215,1418,982],{"class":229},[215,1420,985],{"class":221},[215,1422,407],{"class":229},[215,1424,26],{"class":221},[215,1426,570],{"class":229},[215,1428,941],{"class":351},[215,1430,996],{"class":221},[215,1432,348],{"class":229},[215,1434,379],{"class":351},[215,1436,475],{"class":221},[215,1438,1439,1442,1444,1446,1448],{"class":217,"line":284},[215,1440,1441],{"class":229},"  gap",[215,1443,345],{"class":221},[215,1445,151],{"class":229},[215,1447,379],{"class":351},[215,1449,475],{"class":221},[215,1451,1452],{"class":217,"line":309},[215,1453,1454],{"class":221},"}\n",[215,1456,1457],{"class":217,"line":323},[215,1458,452],{"emptyLinePlaceholder":451},[215,1460,1461],{"class":217,"line":333},[215,1462,1463],{"class":514},"\u002F* Belt and braces for content you do not control (CMS bodies, user posts). *\u002F\n",[215,1465,1466,1469],{"class":217,"line":395},[215,1467,1468],{"class":229},".prose",[215,1470,461],{"class":221},[215,1472,1473,1476,1478,1480],{"class":217,"line":448},[215,1474,1475],{"class":229},"  min-width",[215,1477,345],{"class":221},[215,1479,407],{"class":229},[215,1481,475],{"class":221},[215,1483,1484,1487,1489,1492,1494],{"class":217,"line":455},[215,1485,1486],{"class":229},"  overflow-wrap",[215,1488,345],{"class":221},[215,1490,1491],{"class":229},"break-word",[215,1493,511],{"class":221},[215,1495,1496],{"class":514},"\u002F* break a long word rather than overflow *\u002F\n",[215,1498,1499],{"class":217,"line":464},[215,1500,1454],{"class":221},[215,1502,1503,1505,1508],{"class":217,"line":478},[215,1504,1468],{"class":229},[215,1506,1507],{"class":225}," pre",[215,1509,1510],{"class":221},",\n",[215,1512,1513,1515,1518],{"class":217,"line":493},[215,1514,1468],{"class":229},[215,1516,1517],{"class":225}," table",[215,1519,461],{"class":221},[215,1521,1522,1524,1526,1529],{"class":217,"line":518},[215,1523,1403],{"class":229},[215,1525,345],{"class":221},[215,1527,1528],{"class":229},"block",[215,1530,475],{"class":221},[215,1532,1533,1536,1538,1541,1544],{"class":217,"line":533},[215,1534,1535],{"class":229},"  max-width",[215,1537,345],{"class":221},[215,1539,1540],{"class":229},"100",[215,1542,1543],{"class":351},"%",[215,1545,475],{"class":221},[215,1547,1548,1551,1553,1555,1557],{"class":217,"line":547},[215,1549,1550],{"class":229},"  overflow-x",[215,1552,345],{"class":221},[215,1554,59],{"class":229},[215,1556,812],{"class":221},[215,1558,1559],{"class":514},"\u002F* give wide blocks their own scroller *\u002F\n",[215,1561,1562],{"class":217,"line":553},[215,1563,1454],{"class":221},[19,1565,1566,1569,1570,1574],{},[23,1567,1568],{},"overflow-wrap: break-word"," is worth pairing with the override for prose, because releasing the floor lets the column get narrow but does nothing to make an unbreakable 60-character token fit. Keep it off code blocks, where a break changes what the code says; scroll those instead. A table is the other classic offender and often deserves a different treatment entirely — restructuring it by container width, as in ",[36,1571,1573],{"href":1572},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables\u002F","Container Query Data Tables",", beats a horizontal scroller for readability.",[14,1576,1578],{"id":1577},"browser-support-note","Browser support note",[19,1580,1581,1582,1584],{},"This is specified behaviour rather than a feature, so there is nothing to detect and nothing to polyfill. The automatic minimum size for flex items has been implemented consistently in every engine that shipped a modern flexbox implementation, and ",[23,1583,1378],{}," works wherever CSS Grid does. The only historical caveat worth remembering is that IE 11's older flexbox implementation did not apply the automatic minimum at all, which is why layouts written against it sometimes look correct there and overflow everywhere else.",[14,1586,1588],{"id":1587},"faq","FAQ",[19,1590,1591,1594,1595,1597,1598,1600,1601,1603],{},[65,1592,1593],{},"Why does my flex item refuse to shrink below its content?","\nIts ",[23,1596,55],{}," computes to ",[23,1599,59],{},", and for a flex item that resolves to an automatic minimum size equal to the content's min-content size. ",[23,1602,25],{}," is not allowed to shrink it past that floor, so the item pushes out of its container.",[19,1605,1606,1609,1611,1612,1614],{},[65,1607,1608],{},"Is min-width: 0 or overflow: hidden the better fix?",[23,1610,90],{}," is the direct fix because it removes the automatic minimum without changing anything else. ",[23,1613,1337],{}," with any non-visible value also suppresses the automatic minimum, so use it when you wanted scrolling or clipping on that box anyway.",[19,1616,1617,1620,1621,1623,1624,1626,1627,1629,1630,1632,1633,1635],{},[65,1618,1619],{},"What is the grid equivalent of min-width: 0?","\nWriting ",[23,1622,1378],{}," instead of ",[23,1625,1374],{}," as the track size. A bare ",[23,1628,1374],{}," has an automatic minimum of ",[23,1631,59],{},", so the track cannot shrink below its widest item's content; ",[23,1634,1378],{}," sets the floor to zero.",[19,1637,1638,1641,1642,1644],{},[65,1639,1640],{},"Which content usually triggers this overflow?","\nAnything with a wide unbreakable minimum: ",[23,1643,206],{}," and code blocks that never wrap, tables, long URLs and hashes, and languages without spaces. The bug is invisible until such content lands in an otherwise flexible column.",[14,1646,1648],{"id":1647},"related","Related",[1650,1651,1652,1658,1663,1674,1681],"ul",{},[1653,1654,1655,1657],"li",{},[36,1656,39],{"href":38}," — the parent guide to content-driven sizing.",[1653,1659,1660,1662],{},[36,1661,76],{"href":75}," — the keyword the automatic minimum is derived from.",[1653,1664,1665,1669,1670,1673],{},[36,1666,1668],{"href":1667},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids\u002F","auto-fit and minmax Responsive Grids"," — the other place ",[23,1671,1672],{},"minmax()"," decides whether a layout overflows.",[1653,1675,1676,1680],{},[36,1677,1679],{"href":1678},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size\u002F","container-type: size vs inline-size"," — a second default that quietly changes how a box is sized.",[1653,1682,1683,1687],{},[36,1684,1686],{"href":1685},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps\u002F","Optimizing CSS Animations for 60fps"," — cross-area: why layout-triggering properties are the expensive ones.",[328,1689,1690],{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":211,"searchDepth":236,"depth":236,"links":1692},[1693,1694,1695,1696,1697,1698,1699,1700,1701],{"id":16,"depth":236,"text":17},{"id":48,"depth":236,"text":49},{"id":100,"depth":236,"text":101},{"id":203,"depth":236,"text":204},{"id":1294,"depth":236,"text":1295},{"id":1363,"depth":236,"text":1364},{"id":1577,"depth":236,"text":1578},{"id":1587,"depth":236,"text":1588},{"id":1647,"depth":236,"text":1648},"Why flex and grid items refuse to shrink below their content, how min-width: 0 and minmax(0, 1fr) release the automatic minimum, and which content triggers it.","md",{"pageTitle":1705,"datePublished":1706,"dateModified":1706,"faq":1707},"Fix min-width: auto Overflow in Flex\u002FGrid","2026-07-20",[1708,1710,1712,1714],{"q":1593,"a":1709},"Its min-width computes to auto, and for a flex item that resolves to an automatic minimum size equal to the content's min-content size. flex-shrink is not allowed to shrink it past that floor, so the item pushes out of its container.",{"q":1608,"a":1711},"min-width: 0 is the direct fix because it removes the automatic minimum without changing anything else. overflow with any non-visible value also suppresses the automatic minimum, so use it when you wanted scrolling or clipping on that box anyway.",{"q":1619,"a":1713},"Writing minmax(0, 1fr) instead of 1fr as the track size. A bare 1fr has an automatic minimum of auto, so the track cannot shrink below its widest item's content; minmax(0, 1fr) sets the floor to zero.",{"q":1640,"a":1715},"Anything with a wide unbreakable minimum: pre and code blocks that never wrap, tables, long URLs and hashes, and languages without spaces. The bug is invisible until such content lands in an otherwise flexible column.","\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow",{"title":5,"description":1702},"mastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow\u002Findex","qNivyUAwgAITQpv-MjaIF68pz04LqphWyuEEjiVa_-c",[1721,1724,1727,1730,1733,1736,1739,1742,1745,1748,1751,1754,1757,1760,1763,1766,1769,1772,1775,1778,1781,1784,1787,1790,1793,1796,1799,1802,1805,1808,1811,1814,1817,1820,1823,1826,1829,1832,1835,1838,1841,1844,1847,1850,1853,1856,1859,1861,1864,1867,1870,1873,1876,1879,1882,1885,1888,1891,1894,1897,1900,1903,1906,1909,1912,1915,1918,1921,1924,1927,1930,1932,1935,1938,1941,1942,1945,1948,1951,1954,1957,1960,1963,1966,1969,1972,1975,1978],{"path":1722,"title":1723},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fcreating-accessible-focus-indicators","Creating Accessible Focus Indicators: Building a Ring That Survives Any Background",{"path":1725,"title":1726},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1728,"title":1729},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1731,"title":1732},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css","Reducing Motion Preferences in CSS: How the Setting Becomes a Media Feature",{"path":1734,"title":1735},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Ftarget-size-and-pointer-accessibility","Target Size and Pointer Accessibility: Meeting 2.5.8 Without Redesigning",{"path":1737,"title":1738},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1740,"title":1741},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1743,"title":1744},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1746,"title":1747},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1749,"title":1750},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size","Motion That Scales with Container Size: cqi, cqb, and Derived Durations",{"path":1752,"title":1753},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1755,"title":1756},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1758,"title":1759},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwhen-to-use-javascript-animation","When to Use JavaScript Instead of CSS for Animation",{"path":1761,"title":1762},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fanimating-custom-properties-with-at-property","Animating Custom Properties with @property: Typed Variables That Interpolate",{"path":1764,"title":1765},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1767,"title":1768},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1770,"title":1771},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety","Registered Properties and Type Safety: @property as a Contract for Design Tokens",{"path":1773,"title":1774},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1776,"title":1777},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1779,"title":1780},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1782,"title":1783},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1785,"title":1786},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1788,"title":1789},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-visible-vs-focus-polyfill-alternatives"," vs :focus: Why It Replaced the Focus-Ring Polyfill",{"path":1791,"title":1792},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1794,"title":1795},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1797,"title":1798},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries","Pointer and Hover Media Queries: Gating Affordances by Input Capability",{"path":1800,"title":1801},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript","Smooth Hover Effects Without JavaScript: CSS-Only Patterns for Modern UI",{"path":1803,"title":1804},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1806,"title":1807},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1809,"title":1810},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1812,"title":1813},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-loading-spinners-and-skeletons","CSS-Only Loading Spinners and Skeleton Shimmer Screens with @keyframes",{"path":1815,"title":1816},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-toggle-switches-and-checkboxes","CSS-Only Toggle Switches and Checkboxes That Keep the Native Input",{"path":1818,"title":1819},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1821,"title":1822},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1824,"title":1825},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1827,"title":1828},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1830,"title":1831},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fprofiling-animations-in-devtools","Profiling CSS Animations in DevTools: Finding the Frame That Costs Too Much",{"path":1833,"title":1834},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fwill-change-and-the-compositor-thread","will-change and the Compositor Thread: Layer Promotion Without the Footguns",{"path":1836,"title":1837},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1839,"title":1840},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1842,"title":1843},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1845,"title":1846},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1848,"title":1849},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1851,"title":1852},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions","Writing a Same-Document View Transition: the CSS You Actually Author",{"path":1854,"title":1855},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements","view-transition-name and Shared Elements: Morphing a Thumbnail into a Hero",{"path":1857,"title":1858},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":355,"title":1860},"Modern CSS Layouts & Micro-Interactions",{"path":1862,"title":1863},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1865,"title":1866},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1868,"title":1869},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1871,"title":1872},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1874,"title":1875},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1877,"title":1878},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1880,"title":1881},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1883,"title":1884},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-units-cqi-cqb-explained","Container Query Units Explained: cqi, cqb, cqw, cqh, cqmin and cqmax",{"path":1886,"title":1887},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1889,"title":1890},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1892,"title":1893},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production","How to Use Container Queries in Production Without a Rewrite",{"path":1895,"title":1896},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1898,"title":1899},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1901,"title":1902},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1904,"title":1905},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fbuilding-a-dashboard-with-subgrid","Building a Responsive Dashboard Where Cards Align with Subgrid",{"path":1907,"title":1908},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid","The Holy-Grail Layout with CSS Grid and Container Queries",{"path":1910,"title":1911},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1913,"title":1914},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1916,"title":1917},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fclamp-vs-media-query-typography","clamp() Fluid Type vs Media-Query Step Typography: Tradeoffs and Anatomy",{"path":1919,"title":1920},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-space-scale-with-clamp","Building a Fluid Spacing Scale with clamp() and Container Units",{"path":1922,"title":1923},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1925,"title":1926},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1928,"title":1929},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1931,"title":44},"\u002Fmastering-container-queries-responsive-layouts",{"path":1933,"title":1934},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1936,"title":1937},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1939,"title":1940},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1716,"title":5},{"path":1943,"title":1944},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1946,"title":1947},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1949,"title":1950},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1952,"title":1953},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries","Building Responsive Cards with Container Queries: A Production-Ready Guide",{"path":1955,"title":1956},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1958,"title":1959},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1961,"title":1962},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1964,"title":1965},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1967,"title":1968},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1970,"title":1971},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming","Container Style Query Theming: One Token Instead of a Variant Class Matrix",{"path":1973,"title":1974},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1976,"title":1977},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties","Style Queries With Custom Properties: Declaring, Inheriting, and Matching Tokens",{"path":1979,"title":1980},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support","Style Query Fallbacks and Support: Designing for Older Browser Versions",1784566156645]