[{"data":1,"prerenderedAt":977},["ShallowReactive",2],{"guide-flexbox-wrapping-overflow":3},{"id":4,"title":5,"body":6,"date":969,"description":970,"extension":971,"meta":972,"navigation":85,"path":973,"readingTime":82,"seo":974,"stem":975,"__hash__":976},"guides\u002Fguides\u002Fflexbox-wrapping-overflow.md","Flexbox Wrapping and Overflow",{"type":7,"value":8,"toc":956},"minimark",[9,14,18,107,122,126,181,199,203,210,259,262,266,273,281,284,288,298,382,426,433,437,447,523,532,536,539,637,643,647,650,777,786,800,804,890,894,929,933,952],[10,11,13],"h2",{"id":12},"why-flex-items-overflow","Why Flex Items Overflow",[15,16,17],"p",{},"Flex items have an implicit minimum width: they will not shrink smaller than their content. This is the single most common cause of flex overflow.",[19,20,25],"pre",{"className":21,"code":22,"language":23,"meta":24,"style":24},"language-css shiki shiki-themes github-light github-dark",".container {\n  display: flex;\n  gap: 16px;\n}\n\n.item {\n  \u002F* Contains a long URL — will not shrink below content width *\u002F\n}\n","css","",[26,27,28,41,57,74,80,87,95,102],"code",{"__ignoreMap":24},[29,30,33,37],"span",{"class":31,"line":32},"line",1,[29,34,36],{"class":35},"sScJk",".container",[29,38,40],{"class":39},"sVt8B"," {\n",[29,42,44,48,51,54],{"class":31,"line":43},2,[29,45,47],{"class":46},"sj4cs","  display",[29,49,50],{"class":39},": ",[29,52,53],{"class":46},"flex",[29,55,56],{"class":39},";\n",[29,58,60,63,65,68,72],{"class":31,"line":59},3,[29,61,62],{"class":46},"  gap",[29,64,50],{"class":39},[29,66,67],{"class":46},"16",[29,69,71],{"class":70},"szBVR","px",[29,73,56],{"class":39},[29,75,77],{"class":31,"line":76},4,[29,78,79],{"class":39},"}\n",[29,81,83],{"class":31,"line":82},5,[29,84,86],{"emptyLinePlaceholder":85},true,"\n",[29,88,90,93],{"class":31,"line":89},6,[29,91,92],{"class":35},".item",[29,94,40],{"class":39},[29,96,98],{"class":31,"line":97},7,[29,99,101],{"class":100},"sJ8bj","  \u002F* Contains a long URL — will not shrink below content width *\u002F\n",[29,103,105],{"class":31,"line":104},8,[29,106,79],{"class":39},[15,108,109,110,113,114,117,118,121],{},"Even though ",[26,111,112],{},"flex-shrink"," defaults to ",[26,115,116],{},"1",", the browser applies ",[26,119,120],{},"min-width: auto"," to flex items. This prevents items from shrinking below their content size. Long unbroken text, wide images, or fixed-width elements push items past the container edge.",[10,123,125],{"id":124},"the-fix-override-min-width","The Fix: Override min-width",[19,127,129],{"className":21,"code":128,"language":23,"meta":24,"style":24},".item {\n  min-width: 0; \u002F* Allow shrinking below content width *\u002F\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n",[26,130,131,137,153,165,177],{"__ignoreMap":24},[29,132,133,135],{"class":31,"line":32},[29,134,92],{"class":35},[29,136,40],{"class":39},[29,138,139,142,144,147,150],{"class":31,"line":43},[29,140,141],{"class":46},"  min-width",[29,143,50],{"class":39},[29,145,146],{"class":46},"0",[29,148,149],{"class":39},"; ",[29,151,152],{"class":100},"\u002F* Allow shrinking below content width *\u002F\n",[29,154,155,158,160,163],{"class":31,"line":59},[29,156,157],{"class":46},"  overflow",[29,159,50],{"class":39},[29,161,162],{"class":46},"hidden",[29,164,56],{"class":39},[29,166,167,170,172,175],{"class":31,"line":76},[29,168,169],{"class":46},"  text-overflow",[29,171,50],{"class":39},[29,173,174],{"class":46},"ellipsis",[29,176,56],{"class":39},[29,178,179],{"class":31,"line":82},[29,180,79],{"class":39},[15,182,183,184,187,188,190,191,194,195,198],{},"Setting ",[26,185,186],{},"min-width: 0"," removes the implicit minimum. Now ",[26,189,112],{}," works as expected — the item compresses to fit. Combine it with ",[26,192,193],{},"overflow: hidden"," and ",[26,196,197],{},"text-overflow: ellipsis"," to handle long text gracefully.",[10,200,202],{"id":201},"flex-wrap-wrap-the-basics","flex-wrap: wrap — The Basics",[15,204,205,206,209],{},"By default, flex items stay on one line (",[26,207,208],{},"flex-wrap: nowrap","). Enable wrapping with:",[19,211,213],{"className":21,"code":212,"language":23,"meta":24,"style":24},".container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n",[26,214,215,221,231,243,255],{"__ignoreMap":24},[29,216,217,219],{"class":31,"line":32},[29,218,36],{"class":35},[29,220,40],{"class":39},[29,222,223,225,227,229],{"class":31,"line":43},[29,224,47],{"class":46},[29,226,50],{"class":39},[29,228,53],{"class":46},[29,230,56],{"class":39},[29,232,233,236,238,241],{"class":31,"line":59},[29,234,235],{"class":46},"  flex-wrap",[29,237,50],{"class":39},[29,239,240],{"class":46},"wrap",[29,242,56],{"class":39},[29,244,245,247,249,251,253],{"class":31,"line":76},[29,246,62],{"class":46},[29,248,50],{"class":39},[29,250,67],{"class":46},[29,252,71],{"class":70},[29,254,56],{"class":39},[29,256,257],{"class":31,"line":82},[29,258,79],{"class":39},[15,260,261],{},"Wrapping items will flow to the next line whenever they exceed the container width. But wrapping introduces its own challenges.",[10,263,265],{"id":264},"the-gap-problem-with-wrapped-rows","The Gap Problem with Wrapped Rows",[15,267,268,269,272],{},"When items wrap, ",[26,270,271],{},"gap"," applies between all items — both horizontally and vertically. This means the last row's alignment depends on how many items it contains.",[19,274,279],{"className":275,"code":277,"language":278},[276],"language-text","[Item 1] [Item 2] [Item 3]      ← 3 items, gap between each\n[Item 4] [Item 5]               ← 2 items, left-aligned\n","text",[26,280,277],{"__ignoreMap":24},[15,282,283],{},"Items are not justified to match the row above. If you want a grid-like alignment, CSS Grid is the better tool.",[10,285,287],{"id":286},"flex-basis-and-wrapping-interaction","flex-basis and Wrapping Interaction",[15,289,290,293,294,297],{},[26,291,292],{},"flex-basis"," sets the initial size before growing or shrinking. Combined with ",[26,295,296],{},"flex-wrap: wrap",", it controls when items wrap:",[19,299,301],{"className":21,"code":300,"language":23,"meta":24,"style":24},".container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n\n.item {\n  flex: 1 1 280px; \u002F* grow, shrink, base 280px *\u002F\n}\n",[26,302,303,309,319,329,341,345,349,355,377],{"__ignoreMap":24},[29,304,305,307],{"class":31,"line":32},[29,306,36],{"class":35},[29,308,40],{"class":39},[29,310,311,313,315,317],{"class":31,"line":43},[29,312,47],{"class":46},[29,314,50],{"class":39},[29,316,53],{"class":46},[29,318,56],{"class":39},[29,320,321,323,325,327],{"class":31,"line":59},[29,322,235],{"class":46},[29,324,50],{"class":39},[29,326,240],{"class":46},[29,328,56],{"class":39},[29,330,331,333,335,337,339],{"class":31,"line":76},[29,332,62],{"class":46},[29,334,50],{"class":39},[29,336,67],{"class":46},[29,338,71],{"class":70},[29,340,56],{"class":39},[29,342,343],{"class":31,"line":82},[29,344,79],{"class":39},[29,346,347],{"class":31,"line":89},[29,348,86],{"emptyLinePlaceholder":85},[29,350,351,353],{"class":31,"line":97},[29,352,92],{"class":35},[29,354,40],{"class":39},[29,356,357,360,362,364,367,370,372,374],{"class":31,"line":104},[29,358,359],{"class":46},"  flex",[29,361,50],{"class":39},[29,363,116],{"class":46},[29,365,366],{"class":46}," 1",[29,368,369],{"class":46}," 280",[29,371,71],{"class":70},[29,373,149],{"class":39},[29,375,376],{"class":100},"\u002F* grow, shrink, base 280px *\u002F\n",[29,378,380],{"class":31,"line":379},9,[29,381,79],{"class":39},[383,384,385,398],"table",{},[386,387,388],"thead",{},[389,390,391,395],"tr",{},[392,393,394],"th",{},"Container Width",[392,396,397],{},"Behavior",[399,400,401,410,418],"tbody",{},[389,402,403,407],{},[404,405,406],"td",{},"900px",[404,408,409],{},"3 items per row (3 × 280 + gaps fits)",[389,411,412,415],{},[404,413,414],{},"600px",[404,416,417],{},"2 items per row",[389,419,420,423],{},[404,421,422],{},"300px",[404,424,425],{},"1 item per row",[15,427,428,429,432],{},"Items grow to fill space (",[26,430,431],{},"flex-grow: 1",") but wrap when the container cannot fit another 280px item.",[10,434,436],{"id":435},"the-flex-shrink-0-trap","The flex-shrink: 0 Trap",[15,438,183,439,442,443,446],{},[26,440,441],{},"flex-shrink: 0"," prevents items from compressing. Combined with ",[26,444,445],{},"nowrap",", items overflow:",[19,448,450],{"className":21,"code":449,"language":23,"meta":24,"style":24},".container {\n  display: flex;\n  \u002F* nowrap is default *\u002F\n}\n\n.item {\n  flex-shrink: 0; \u002F* Items refuse to shrink *\u002F\n  width: 300px;   \u002F* 4 items × 300px = 1200px — overflows a 1000px container *\u002F\n}\n",[26,451,452,458,468,473,477,481,487,501,519],{"__ignoreMap":24},[29,453,454,456],{"class":31,"line":32},[29,455,36],{"class":35},[29,457,40],{"class":39},[29,459,460,462,464,466],{"class":31,"line":43},[29,461,47],{"class":46},[29,463,50],{"class":39},[29,465,53],{"class":46},[29,467,56],{"class":39},[29,469,470],{"class":31,"line":59},[29,471,472],{"class":100},"  \u002F* nowrap is default *\u002F\n",[29,474,475],{"class":31,"line":76},[29,476,79],{"class":39},[29,478,479],{"class":31,"line":82},[29,480,86],{"emptyLinePlaceholder":85},[29,482,483,485],{"class":31,"line":89},[29,484,92],{"class":35},[29,486,40],{"class":39},[29,488,489,492,494,496,498],{"class":31,"line":97},[29,490,491],{"class":46},"  flex-shrink",[29,493,50],{"class":39},[29,495,146],{"class":46},[29,497,149],{"class":39},[29,499,500],{"class":100},"\u002F* Items refuse to shrink *\u002F\n",[29,502,503,506,508,511,513,516],{"class":31,"line":104},[29,504,505],{"class":46},"  width",[29,507,50],{"class":39},[29,509,510],{"class":46},"300",[29,512,71],{"class":70},[29,514,515],{"class":39},";   ",[29,517,518],{"class":100},"\u002F* 4 items × 300px = 1200px — overflows a 1000px container *\u002F\n",[29,520,521],{"class":31,"line":379},[29,522,79],{"class":39},[15,524,525,526,528,529,531],{},"Use ",[26,527,441],{}," only when items have a genuine minimum size — icons, avatars, fixed-width controls. For fluid content, let ",[26,530,112],{}," do its job.",[10,533,535],{"id":534},"horizontal-scrolling-containers","Horizontal Scrolling Containers",[15,537,538],{},"For navigation bars and tag lists, horizontal scrolling is intentional:",[19,540,542],{"className":21,"code":541,"language":23,"meta":24,"style":24},".scroll-nav {\n  display: flex;\n  overflow-x: auto;\n  gap: 8px;\n  scrollbar-width: thin;\n}\n\n.scroll-nav > * {\n  flex-shrink: 0; \u002F* Prevent items from compressing *\u002F\n}\n",[26,543,544,551,561,573,586,598,602,606,619,632],{"__ignoreMap":24},[29,545,546,549],{"class":31,"line":32},[29,547,548],{"class":35},".scroll-nav",[29,550,40],{"class":39},[29,552,553,555,557,559],{"class":31,"line":43},[29,554,47],{"class":46},[29,556,50],{"class":39},[29,558,53],{"class":46},[29,560,56],{"class":39},[29,562,563,566,568,571],{"class":31,"line":59},[29,564,565],{"class":46},"  overflow-x",[29,567,50],{"class":39},[29,569,570],{"class":46},"auto",[29,572,56],{"class":39},[29,574,575,577,579,582,584],{"class":31,"line":76},[29,576,62],{"class":46},[29,578,50],{"class":39},[29,580,581],{"class":46},"8",[29,583,71],{"class":70},[29,585,56],{"class":39},[29,587,588,591,593,596],{"class":31,"line":82},[29,589,590],{"class":46},"  scrollbar-width",[29,592,50],{"class":39},[29,594,595],{"class":46},"thin",[29,597,56],{"class":39},[29,599,600],{"class":31,"line":89},[29,601,79],{"class":39},[29,603,604],{"class":31,"line":97},[29,605,86],{"emptyLinePlaceholder":85},[29,607,608,610,613,617],{"class":31,"line":104},[29,609,548],{"class":35},[29,611,612],{"class":70}," >",[29,614,616],{"class":615},"s9eBZ"," *",[29,618,40],{"class":39},[29,620,621,623,625,627,629],{"class":31,"line":379},[29,622,491],{"class":46},[29,624,50],{"class":39},[29,626,146],{"class":46},[29,628,149],{"class":39},[29,630,631],{"class":100},"\u002F* Prevent items from compressing *\u002F\n",[29,633,635],{"class":31,"line":634},10,[29,636,79],{"class":39},[15,638,639,640,642],{},"Here, ",[26,641,441],{}," is correct — you want items at their natural width, with scrolling to handle overflow.",[10,644,646],{"id":645},"nested-flex-containers-and-overflow","Nested Flex Containers and Overflow",[15,648,649],{},"Overflow bugs multiply in nested flex layouts:",[19,651,653],{"className":21,"code":652,"language":23,"meta":24,"style":24},".outer {\n  display: flex;\n}\n\n.sidebar {\n  width: 250px;\n  flex-shrink: 0;\n}\n\n.content {\n  flex: 1;\n  min-width: 0; \u002F* Critical — prevents inner content from pushing outer *\u002F\n  display: flex;\n  flex-wrap: wrap;\n}\n",[26,654,655,662,672,676,680,687,700,710,714,718,725,736,750,761,772],{"__ignoreMap":24},[29,656,657,660],{"class":31,"line":32},[29,658,659],{"class":35},".outer",[29,661,40],{"class":39},[29,663,664,666,668,670],{"class":31,"line":43},[29,665,47],{"class":46},[29,667,50],{"class":39},[29,669,53],{"class":46},[29,671,56],{"class":39},[29,673,674],{"class":31,"line":59},[29,675,79],{"class":39},[29,677,678],{"class":31,"line":76},[29,679,86],{"emptyLinePlaceholder":85},[29,681,682,685],{"class":31,"line":82},[29,683,684],{"class":35},".sidebar",[29,686,40],{"class":39},[29,688,689,691,693,696,698],{"class":31,"line":89},[29,690,505],{"class":46},[29,692,50],{"class":39},[29,694,695],{"class":46},"250",[29,697,71],{"class":70},[29,699,56],{"class":39},[29,701,702,704,706,708],{"class":31,"line":97},[29,703,491],{"class":46},[29,705,50],{"class":39},[29,707,146],{"class":46},[29,709,56],{"class":39},[29,711,712],{"class":31,"line":104},[29,713,79],{"class":39},[29,715,716],{"class":31,"line":379},[29,717,86],{"emptyLinePlaceholder":85},[29,719,720,723],{"class":31,"line":634},[29,721,722],{"class":35},".content",[29,724,40],{"class":39},[29,726,728,730,732,734],{"class":31,"line":727},11,[29,729,359],{"class":46},[29,731,50],{"class":39},[29,733,116],{"class":46},[29,735,56],{"class":39},[29,737,739,741,743,745,747],{"class":31,"line":738},12,[29,740,141],{"class":46},[29,742,50],{"class":39},[29,744,146],{"class":46},[29,746,149],{"class":39},[29,748,749],{"class":100},"\u002F* Critical — prevents inner content from pushing outer *\u002F\n",[29,751,753,755,757,759],{"class":31,"line":752},13,[29,754,47],{"class":46},[29,756,50],{"class":39},[29,758,53],{"class":46},[29,760,56],{"class":39},[29,762,764,766,768,770],{"class":31,"line":763},14,[29,765,235],{"class":46},[29,767,50],{"class":39},[29,769,240],{"class":46},[29,771,56],{"class":39},[29,773,775],{"class":31,"line":774},15,[29,776,79],{"class":39},[15,778,779,780,782,783,785],{},"Without ",[26,781,186],{}," on ",[26,784,722],{},", its implicit minimum width (from child content) prevents the flex item from shrinking, pushing the sidebar off-screen.",[15,787,788,792,793,795,796,799],{},[789,790,791],"strong",{},"Rule",": Every flex item that contains text or nested flex containers should have ",[26,794,186],{}," (or ",[26,797,798],{},"min-height: 0"," for column direction).",[10,801,803],{"id":802},"common-overflow-patterns-and-fixes","Common Overflow Patterns and Fixes",[383,805,806,819],{},[386,807,808],{},[389,809,810,813,816],{},[392,811,812],{},"Problem",[392,814,815],{},"Cause",[392,817,818],{},"Fix",[399,820,821,835,848,861,874],{},[389,822,823,826,830],{},[404,824,825],{},"Items overflow container",[404,827,828],{},[26,829,120],{},[404,831,832,833],{},"Set ",[26,834,186],{},[389,836,837,840,843],{},[404,838,839],{},"Long URL breaks layout",[404,841,842],{},"Unbroken text",[404,844,845],{},[26,846,847],{},"overflow-wrap: break-word",[389,849,850,853,858],{},[404,851,852],{},"Wrapped gaps misalign",[404,854,855,857],{},[26,856,271],{}," on wrapped flex",[404,859,860],{},"Use CSS Grid instead",[389,862,863,866,869],{},[404,864,865],{},"Sidebar pushed off",[404,867,868],{},"Nested content min-width",[404,870,871,873],{},[26,872,186],{}," on outer flex item",[389,875,876,879,882],{},[404,877,878],{},"Horizontal nav overflow",[404,880,881],{},"Items compress",[404,883,884,886,887],{},[26,885,441],{}," + ",[26,888,889],{},"overflow-x: auto",[10,891,893],{"id":892},"key-takeaways","Key Takeaways",[895,896,897,905,910,917,923,926],"ul",{},[898,899,900,902,903],"li",{},[26,901,120],{}," is the default reason flex items overflow — override with ",[26,904,186],{},[898,906,907,909],{},[26,908,296],{}," lets items reflow to the next line but does not justify rows",[898,911,912,914,915],{},[26,913,441],{}," prevents compression but causes overflow with ",[26,916,445],{},[898,918,919,920,922],{},"Nested flex containers need ",[26,921,186],{}," on the outer item to prevent child content from expanding the parent",[898,924,925],{},"Use horizontal scrolling for intentional overflow in nav bars and tag lists",[898,927,928],{},"For grid-like layouts with wrapping, CSS Grid is more predictable than flex-wrap",[10,930,932],{"id":931},"try-it-yourself","Try It Yourself",[15,934,935,936,941,942,945,946,948,949,951],{},"Build and test flex layouts with wrapping and overflow using our ",[937,938,940],"a",{"href":939},"\u002Ftools\u002Fflexbox-generator","Flexbox Generator",". Adjust ",[26,943,944],{},"flex-wrap",", ",[26,947,292],{},", and ",[26,950,271],{}," — see the results in real time.",[953,954,955],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":24,"searchDepth":43,"depth":43,"links":957},[958,959,960,961,962,963,964,965,966,967,968],{"id":12,"depth":43,"text":13},{"id":124,"depth":43,"text":125},{"id":201,"depth":43,"text":202},{"id":264,"depth":43,"text":265},{"id":286,"depth":43,"text":287},{"id":435,"depth":43,"text":436},{"id":534,"depth":43,"text":535},{"id":645,"depth":43,"text":646},{"id":802,"depth":43,"text":803},{"id":892,"depth":43,"text":893},{"id":931,"depth":43,"text":932},"2026-05-28","Master flex-wrap, overflow behavior, and min-width quirks in CSS Flexbox — the patterns that cause items to break out of their container.","md",{"immutable":85},"\u002Fguides\u002Fflexbox-wrapping-overflow",{"title":5,"description":970},"guides\u002Fflexbox-wrapping-overflow","WMI8YQ75bx_GbGFUkZE5sV_G8Gk-51kvGgDdAwcxKAc",1780401333964]