[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"post:\u002Fpost\u002Fyouve-been-sizing-elements-the-wrong-way-and-css-has-had-the-fix-for-years":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,25,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2,{"post":38,"related":940,"translations":1006,"resolved":9},{"id":39,"slug":40,"title":41,"excerpt":42,"image":43,"featured":44,"groupId":45,"publishedAt":46,"readingTime":47,"views":48,"author":49,"category":51,"tags":52,"contentJson":56,"metaTitle":937,"metaDescription":938,"updatedAt":939},"1180b487-38a1-43fb-b5ea-8be010044414","youve-been-sizing-elements-the-wrong-way-and-css-has-had-the-fix-for-years","You've been sizing elements the wrong way. And CSS has had the fix for years.","You set width: 200px. It works... until it becomes min-width, max-width and some unreadable calc(). What if the content called the ideal size?","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1776608913866-featured-uxbjol.jpeg",false,"3c4cdd6a-ceb3-434d-bf87-a02e8aa74c9d","2026-06-11T10:59:12.865699+00:00",12,0,{"name":50,"avatar":9},"Genildo Souza",{"slug":6,"name":7,"color":8},[53],{"slug":54,"name":55},"css","CSS",{"type":57,"content":58},"doc",[59,92,105,114,120,142,169,221,229,240,249,266,273,306,314,330,337,348,384,392,419,426,438,445,478,486,492,499,506,514,541,553,560,578,586,751,763,771,779,934],{"type":60,"attrs":61,"content":63},"paragraph",{"id":62},"p_mcbuyo0j",[64,67,72,74,78,80,84,86,90],{"text":65,"type":66},"The classic problem: you have a button. The button text changes depending on context — sometimes it's \"Save\", sometimes it's \"Save and continue editing\". You define ","text",{"text":68,"type":66,"marks":69},"width: 200px",[70],{"type":71},"code",{"text":73,"type":66},". It works... until it doesn't. Then it becomes ",{"text":75,"type":66,"marks":76},"min-width",[77],{"type":71},{"text":79,"type":66},", then ",{"text":81,"type":66,"marks":82},"max-width",[83],{"type":71},{"text":85,"type":66},", then some ",{"text":87,"type":66,"marks":88},"calc()",[89],{"type":71},{"text":91,"type":66}," that nobody can read anymore.",{"type":60,"attrs":93,"content":95},{"id":94},"p_fgq3r1gn",[96,98,103],{"text":97,"type":66},"There's a different approach. Instead of you deciding the element's size, ",{"text":99,"type":66,"marks":100},"you let the content decide.",[101],{"type":102},"bold",{"text":104,"type":66}," That's exactly what CSS intrinsic sizing values do.",{"type":106,"attrs":107,"content":109},"heading",{"id":108,"level":36},"h_sa0oufwc",[110],{"text":111,"type":66,"marks":112},"Two ways to think about size in CSS",[113],{"type":102},{"type":60,"attrs":115,"content":117},{"id":116},"p_crpd1hb9",[118],{"text":119,"type":66},"Before diving into the three values, it's worth understanding the distinction that documents them:",{"type":60,"attrs":121,"content":123},{"id":122},"p_y5t2dbo0",[124,128,130,134,136,140],{"text":125,"type":66,"marks":126},"Extrinsic sizing",[127],{"type":102},{"text":129,"type":66}," is when you impose a size on the element — ",{"text":131,"type":66,"marks":132},"width: 300px",[133],{"type":71},{"text":135,"type":66},", ",{"text":137,"type":66,"marks":138},"width: 50%",[139],{"type":71},{"text":141,"type":66},". You decide, the element obeys.",{"type":60,"attrs":143,"content":145},{"id":144},"p_83dqntjw",[146,150,152,156,157,161,163,167],{"text":147,"type":66,"marks":148},"Intrinsic sizing",[149],{"type":102},{"text":151,"type":66}," is when the size emerges from the content. The element tells you its ideal size, and CSS respects that. ",{"text":153,"type":66,"marks":154},"min-content",[155],{"type":71},{"text":135,"type":66},{"text":158,"type":66,"marks":159},"max-content",[160],{"type":71},{"text":162,"type":66}," and ",{"text":164,"type":66,"marks":165},"fit-content",[166],{"type":71},{"text":168,"type":66}," are intrinsic values.",{"type":170,"attrs":171,"content":173},"compare",{"id":172},"cmp_5mfxd92m",[174,191,206],{"type":175,"attrs":176,"content":179},"compareColumn",{"id":177,"side":178,"title":153},"col_1l3gifa4","neutral",[180,185],{"type":60,"attrs":181,"content":183},{"id":182},"p_f1cze01o",[184],{"text":153,"type":66},{"type":60,"attrs":186,"content":188},{"id":187},"p_aj0urtaw",[189],{"text":190,"type":66},"The smallest possible size without causing overflow. For text, it's equivalent to the longest word.",{"type":175,"attrs":192,"content":194},{"id":193,"side":178,"title":158},"col_ux9dyila",[195,200],{"type":60,"attrs":196,"content":198},{"id":197},"p_di9oxs9y",[199],{"text":158,"type":66},{"type":60,"attrs":201,"content":203},{"id":202},"p_opx9f7t4",[204],{"text":205,"type":66},"The ideal size if space were infinite. No line breaks, no compression.",{"type":175,"attrs":207,"content":209},{"id":208,"side":178,"title":164},"col_og9lw2ma",[210,215],{"type":60,"attrs":211,"content":213},{"id":212},"p_t0bxl5kt",[214],{"text":164,"type":66},{"type":60,"attrs":216,"content":218},{"id":217},"p_pawdacjm",[219],{"text":220,"type":66},"The smart middle ground: grows up to max-content, shrinks down to available space.",{"type":106,"attrs":222,"content":224},{"id":223,"level":36},"h_q8vt0a4i",[225],{"text":226,"type":66,"marks":227},"min-content: the smallest size that doesn't break anything",[228],{"type":102},{"type":60,"attrs":230,"content":232},{"id":231},"p_d3fv4kgq",[233,235,238],{"text":234,"type":66},"With ",{"text":153,"type":66,"marks":236},[237],{"type":71},{"text":239,"type":66},", the element shrinks to its minimum viable limit. For a text block, that limit is the longest word — CSS will break lines at every space until only the term that can't be split remains.",{"type":241,"attrs":242,"content":246},"codeBlock",{"id":243,"language":244,"highlighted":245},"code_ergc4om9","typescript","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.card {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* O card vai ter a largura exata da sua palavra ou imagem mais larga *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[247],{"text":248,"type":66},".card {\n  width: min-content;\n}\n\u002F* O card vai ter a largura exata da sua palavra ou imagem mais larga *\u002F",{"type":60,"attrs":250,"content":252},{"id":251},"p_6y2osrdq",[253,255,259,261,264],{"text":254,"type":66},"The most elegant use case is the classic ",{"text":256,"type":66,"marks":257},"\u003Cfigure>",[258],{"type":71},{"text":260,"type":66}," with caption. Without anything, the figure element is a block and takes up 100% of the container. With ",{"text":153,"type":66,"marks":262},[263],{"type":71},{"text":265,"type":66},", it hugs the image — and the caption obeys the same limit.",{"type":241,"attrs":267,"content":270},{"id":268,"language":244,"highlighted":269},"code_jggnoyfz","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">figure {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">figcaption {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 0.85rem;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">666\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Segue automaticamente a largura da imagem *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[271],{"text":272,"type":66},"figure {\n  width: min-content;\n}\n\nfigcaption {\n  font-size: 0.85rem;\n  color: #666;\n  \u002F* Segue automaticamente a largura da imagem *\u002F\n}",{"type":274,"attrs":275,"content":278},"callout",{"id":276,"type":277,"title":9},"call_z00ygpdh","info",[279],{"type":60,"attrs":280,"content":282},{"id":281},"p_wedwj4a3",[283,287,289,292,294,298,300,304],{"text":284,"type":66,"marks":285},"In Grid and Flexbox:",[286],{"type":102},{"text":288,"type":66}," ",{"text":153,"type":66,"marks":290},[291],{"type":71},{"text":293,"type":66}," works as a value for ",{"text":295,"type":66,"marks":296},"flex-basis",[297],{"type":71},{"text":299,"type":66}," and in the ",{"text":301,"type":66,"marks":302},"grid-template-columns",[303],{"type":71},{"text":305,"type":66}," functions. You can define a column that will never be smaller than its content demands.",{"type":106,"attrs":307,"content":309},{"id":308,"level":36},"h_xsj5wdxt",[310],{"text":311,"type":66,"marks":312},"max-content: infinite space, real size",[313],{"type":102},{"type":60,"attrs":315,"content":317},{"id":316},"p_z1c3stx1",[318,321,323,328],{"text":158,"type":66,"marks":319},[320],{"type":71},{"text":322,"type":66}," is the answer to the question: ",{"text":324,"type":66,"marks":325},"\"what would be the ideal size of this element if space weren't an issue?\"",[326],{"type":327},"italic",{"text":329,"type":66}," CSS calculates the size as if unlimited space were available — no forced line breaks, no compression.",{"type":241,"attrs":331,"content":334},{"id":332,"language":244,"highlighted":333},"code_4t5u5b90","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.tooltip {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Expande até caber todo o texto numa linha *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.nav\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">item {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Cada item ocupa exatamente o espaço do seu label *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[335],{"text":336,"type":66},".tooltip {\n  width: max-content;\n  \u002F* Expande até caber todo o texto numa linha *\u002F\n}\n\n.nav-item {\n  width: max-content;\n  \u002F* Cada item ocupa exatamente o espaço do seu label *\u002F\n}",{"type":60,"attrs":338,"content":340},{"id":339},"p_9rvs1omf",[341,343,346],{"text":342,"type":66},"The important warning: if the content is wider than the parent container, you'll get overflow. ",{"text":158,"type":66,"marks":344},[345],{"type":71},{"text":347,"type":66}," isn't responsive by nature — it's precise.",{"type":170,"attrs":349,"content":351},{"id":350},"cmp_n9clp16y",[352,368],{"type":175,"attrs":353,"content":357},{"id":354,"side":355,"title":356},"col_r0nqcc7u","left","✕ Overflow happens",[358,361],{"type":60,"attrs":359},{"id":360},"p_w0fgkexs",{"type":241,"attrs":362,"content":365},{"id":363,"language":244,"highlighted":364},"code_fjc0gj5h","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.container { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 300px; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.filho {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* texto longo = overflow *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[366],{"text":367,"type":66},".container { width: 300px; }\n.filho {\n  width: max-content;\n  \u002F* texto longo = overflow *\u002F\n}",{"type":175,"attrs":369,"content":373},{"id":370,"side":371,"title":372},"col_7w1gfhj9","right","✓ Correct usage",[374,377],{"type":60,"attrs":375},{"id":376},"p_gowozfye",{"type":241,"attrs":378,"content":381},{"id":379,"language":244,"highlighted":380},"code_y07e5hhu","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.badge {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* conteúdo curto e previsível *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  white\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: nowrap;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[382],{"text":383,"type":66},".badge {\n  width: max-content;\n  \u002F* conteúdo curto e previsível *\u002F\n  white-space: nowrap;\n}",{"type":106,"attrs":385,"content":387},{"id":386,"level":36},"h_qb7f8kum",[388],{"text":389,"type":66,"marks":390},"fit-content: the smartest of the three",[391],{"type":102},{"type":60,"attrs":393,"content":395},{"id":394},"p_d8cu2voy",[396,399,401,405,408,412,415],{"text":164,"type":66,"marks":397},[398],{"type":71},{"text":400,"type":66}," combines the previous two in an adaptive way. The behavior is: ",{"text":402,"type":66,"marks":403},"grows up to the ",[404],{"type":327},{"text":158,"type":66,"marks":406},[407],{"type":71},{"text":409,"type":66,"marks":410},", but never more than the available space — and never smaller than the ",[411],{"type":327},{"text":153,"type":66,"marks":413},[414],{"type":71},{"text":416,"type":66,"marks":417},".",[418],{"type":327},{"type":241,"attrs":420,"content":423},{"id":421,"language":244,"highlighted":422},"code_f0v4zpnn","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.button {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Abraça o texto — sem padding excessivo, sem overflow *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">titulo {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Ocupa só o que o título precisa *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[424],{"text":425,"type":66},".button {\n  width: fit-content;\n  \u002F* Abraça o texto — sem padding excessivo, sem overflow *\u002F\n}\n\n.card-titulo {\n  width: fit-content;\n  \u002F* Ocupa só o que o título precisa *\u002F\n}",{"type":60,"attrs":427,"content":429},{"id":428},"p_wta9keg8",[430,432,436],{"text":431,"type":66},"There's also the function version, ",{"text":433,"type":66,"marks":434},"fit-content(valor)",[435],{"type":71},{"text":437,"type":66},", which adds an explicit maximum cap:",{"type":241,"attrs":439,"content":442},{"id":440,"language":244,"highlighted":441},"code_ou8ddsug","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.coluna\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">sidebar {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(300px);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Cresce com o conteúdo, mas nunca passa de 300px *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[443],{"text":444,"type":66},".coluna-sidebar {\n  width: fit-content(300px);\n  \u002F* Cresce com o conteúdo, mas nunca passa de 300px *\u002F\n}",{"type":274,"attrs":446,"content":449},{"id":447,"type":448,"title":9},"call_74vhm56e","tip",[450],{"type":60,"attrs":451,"content":453},{"id":452},"p_8qtjtvdq",[454,458,460,464,466,470,472,476],{"text":455,"type":66,"marks":456},"Classic use case: centered navigation.",[457],{"type":102},{"text":459,"type":66}," A ",{"text":461,"type":66,"marks":462},"\u003Cnav>",[463],{"type":71},{"text":465,"type":66}," with ",{"text":467,"type":66,"marks":468},"width: fit-content",[469],{"type":71},{"text":471,"type":66}," + ",{"text":473,"type":66,"marks":474},"margin: auto",[475],{"type":71},{"text":477,"type":66}," centers automatically without needing flexbox or an extra container.",{"type":106,"attrs":479,"content":481},{"id":480,"level":36},"h_o2npd87h",[482],{"text":483,"type":66,"marks":484},"How to use in Grid and Flexbox contexts",[485],{"type":102},{"type":60,"attrs":487,"content":489},{"id":488},"p_9d8nd0dd",[490],{"text":491,"type":66},"Intrinsic values gain even more power inside Grid and Flexbox, because they directly control the behavior of tracks and items:",{"type":241,"attrs":493,"content":496},{"id":494,"language":244,"highlighted":495},"code_3moei8wj","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Grid: coluna que abraça o conteúdo, outra que preenche o resto *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.layout {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: grid;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content 1fr;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* sidebar com largura exata do conteúdo | main área que cresce *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Flexbox: item que não encolhe além do seu conteúdo mínimo *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">item {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">basis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">grow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[497],{"text":498,"type":66},"\u002F* Grid: coluna que abraça o conteúdo, outra que preenche o resto *\u002F\n.layout {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  \u002F* sidebar com largura exata do conteúdo | main área que cresce *\u002F\n}\n\n\u002F* Flexbox: item que não encolhe além do seu conteúdo mínimo *\u002F\n.flex-item {\n  flex-basis: min-content;\n  flex-grow: 1;\n}",{"type":241,"attrs":500,"content":503},{"id":501,"language":244,"highlighted":502},"code_x6yc7wmu","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* minmax com conteúdo intrínseco — colunas que nunca ficam pequenas demais *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">cards {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: grid;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">fit, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content, 1fr));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1rem;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[504],{"text":505,"type":66},"\u002F* minmax com conteúdo intrínseco — colunas que nunca ficam pequenas demais *\u002F\n.grid-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));\n  gap: 1rem;\n}",{"type":106,"attrs":507,"content":509},{"id":508,"level":36},"h_nmn6vzky",[510],{"text":511,"type":66,"marks":512},"Animating between intrinsic values",[513],{"type":102},{"type":60,"attrs":515,"content":517},{"id":516},"p_ql7aphyy",[518,520,524,526,530,532,535,536,539],{"text":519,"type":66},"For a long time, animating from ",{"text":521,"type":66,"marks":522},"height: 0",[523],{"type":71},{"text":525,"type":66}," to ",{"text":527,"type":66,"marks":528},"height: auto",[529],{"type":71},{"text":531,"type":66}," was impossible in CSS. Animations for sizing values like ",{"text":153,"type":66,"marks":533},[534],{"type":71},{"text":162,"type":66},{"text":164,"type":66,"marks":537},[538],{"type":71},{"text":540,"type":66}," didn't work either.",{"type":60,"attrs":542,"content":544},{"id":543},"p_467aablu",[545,547,551],{"text":546,"type":66},"Chrome 129 changed that with ",{"text":548,"type":66,"marks":549},"interpolate-size",[550],{"type":71},{"text":552,"type":66},":",{"type":241,"attrs":554,"content":557},{"id":555,"language":244,"highlighted":556},"code_1ajrxhpc","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Ativa animações pra valores intrínsecos no documento inteiro *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:root {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  interpolate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: allow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">keywords;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.accordion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: hidden;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: height 0.3s ease;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.accordion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content.open {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">content;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Agora anima suavemente — sem JavaScript *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[558],{"text":559,"type":66},"\u002F* Ativa animações pra valores intrínsecos no documento inteiro *\u002F\n:root {\n  interpolate-size: allow-keywords;\n}\n\n.accordion-content {\n  height: 0;\n  overflow: hidden;\n  transition: height 0.3s ease;\n}\n\n.accordion-content.open {\n  height: fit-content;\n  \u002F* Agora anima suavemente — sem JavaScript *\u002F\n}",{"type":274,"attrs":561,"content":563},{"id":562,"type":277,"title":9},"call_8qi9er17",[564],{"type":60,"attrs":565,"content":567},{"id":566},"p_l2qzrl15",[568,572,573,576],{"text":569,"type":66,"marks":570},"Current support:",[571],{"type":102},{"text":288,"type":66},{"text":548,"type":66,"marks":574},[575],{"type":71},{"text":577,"type":66}," is available in Chrome 129+ and Edge. Firefox and Safari still don't support it. For production use, apply as progressive enhancement with functional fallback.",{"type":106,"attrs":579,"content":581},{"id":580,"level":36},"h_v072d62a",[582],{"text":583,"type":66,"marks":584},"Where each one fits",[585],{"type":102},{"type":587,"attrs":588,"content":590},"table",{"id":589},"tbl_y1hbthrp",[591,629,660,690,720],{"type":592,"content":593},"tableRow",[594,607,618],{"type":595,"attrs":596,"content":598},"tableHeader",{"align":355,"colspan":597,"rowspan":597,"colwidth":9},1,[599],{"type":60,"attrs":600,"content":602},{"id":601},"p_yfs6v23l",[603],{"text":604,"type":66,"marks":605},"Value",[606],{"type":102},{"type":595,"attrs":608,"content":609},{"align":355,"colspan":597,"rowspan":597,"colwidth":9},[610],{"type":60,"attrs":611,"content":613},{"id":612},"p_punfot32",[614],{"text":615,"type":66,"marks":616},"Behavior",[617],{"type":102},{"type":595,"attrs":619,"content":620},{"align":355,"colspan":597,"rowspan":597,"colwidth":9},[621],{"type":60,"attrs":622,"content":624},{"id":623},"p_cess3v74",[625],{"text":626,"type":66,"marks":627},"Best use",[628],{"type":102},{"type":592,"content":630},[631,642,651],{"type":632,"attrs":633,"content":634},"tableCell",{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[635],{"type":60,"attrs":636,"content":638},{"id":637},"p_a58gmikp",[639],{"text":153,"type":66,"marks":640},[641],{"type":102},{"type":632,"attrs":643,"content":644},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[645],{"type":60,"attrs":646,"content":648},{"id":647},"p_flgwaqya",[649],{"text":650,"type":66},"Smallest size without overflow",{"type":632,"attrs":652,"content":653},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[654],{"type":60,"attrs":655,"content":657},{"id":656},"p_w8mdbpdb",[658],{"text":659,"type":66},"figure + caption, compact grid columns",{"type":592,"content":661},[662,672,681],{"type":632,"attrs":663,"content":664},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[665],{"type":60,"attrs":666,"content":668},{"id":667},"p_7wmxkanv",[669],{"text":158,"type":66,"marks":670},[671],{"type":102},{"type":632,"attrs":673,"content":674},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[675],{"type":60,"attrs":676,"content":678},{"id":677},"p_0o77bdy2",[679],{"text":680,"type":66},"Ideal size with infinite space",{"type":632,"attrs":682,"content":683},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[684],{"type":60,"attrs":685,"content":687},{"id":686},"p_vcc9jle7",[688],{"text":689,"type":66},"tooltips, badges, predictable nav items",{"type":592,"content":691},[692,702,711],{"type":632,"attrs":693,"content":694},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[695],{"type":60,"attrs":696,"content":698},{"id":697},"p_liacep70",[699],{"text":164,"type":66,"marks":700},[701],{"type":102},{"type":632,"attrs":703,"content":704},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[705],{"type":60,"attrs":706,"content":708},{"id":707},"p_v8l47a82",[709],{"text":710,"type":66},"Grows up to available space, without exceeding",{"type":632,"attrs":712,"content":713},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[714],{"type":60,"attrs":715,"content":717},{"id":716},"p_l3eiyn65",[718],{"text":719,"type":66},"buttons, headings, centered navigation",{"type":592,"content":721},[722,733,742],{"type":632,"attrs":723,"content":724},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[725],{"type":60,"attrs":726,"content":728},{"id":727},"p_jgxgewau",[729],{"text":730,"type":66,"marks":731},"fit-content(x)",[732],{"type":102},{"type":632,"attrs":734,"content":735},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[736],{"type":60,"attrs":737,"content":739},{"id":738},"p_gm8ygt9t",[740],{"text":741,"type":66},"fit-content with explicit ceiling",{"type":632,"attrs":743,"content":744},{"align":9,"colspan":597,"rowspan":597,"colwidth":9},[745],{"type":60,"attrs":746,"content":748},{"id":747},"p_beqp52ew",[749],{"text":750,"type":66},"sidebars, columns with maximum limit",{"type":752,"attrs":753},"summaryBox",{"id":754,"items":755,"title":762},"sum_ry9s5rzn",[756,757,758,759,760,761],"min-content — the element shrinks down to the widest word or image. Useful for hugging content without forcing a fixed width.","max-content — the element expands as if it had infinite space. Precise, but can cause overflow if not used carefully.","fit-content — the most versatile. Grows with content, respects the container, doesn't exceed max-content","fit-content(x) — same as above, but with a ceiling. Great for layouts with maximum width restrictions.","interpolate-size — 2024 newcomer. Allows animating to intrinsic values in Chrome 129+. Keep an eye on support.","All three work in width, height, flex-basis, and Grid tracks.","What to take away from this article",{"type":60,"attrs":764,"content":766},{"id":765},"p_ciuxocu3",[767],{"text":768,"type":66,"marks":769},"Media query isn't wrong. Pixels aren't either. The problem is when they become the only tool available — and you start solving in JavaScript a problem CSS already solved.",[770],{"type":327},{"type":60,"attrs":772,"content":774},{"id":773},"p_hhbbssp3",[775],{"text":776,"type":66,"marks":777},"Intrinsic sizing doesn't replace everything. But it eliminates a good chunk of manual work calculating widths that, in the end, the browser would calculate better on its own.",[778],{"type":327},{"type":780,"attrs":781},"quiz",{"id":782,"title":783,"questions":784},"quiz_e9ajd37z","CSS Quiz",[785,801,816,831,846,861,876,889,904,919],{"options":786,"question":800},[787,791,794,797],{"text":788,"isCorrect":789,"rationale":790},"Extrinsic sizing imposes a fixed size on the element, while intrinsic sizing allows the content to determine the ideal size.",true,"Extrinsic sizing comes from outside in (defined by the developer), while intrinsic comes from inside out (based on content).",{"text":792,"isCorrect":44,"rationale":793},"Extrinsic sizing is used only in Flexbox, while intrinsic is exclusive to CSS Grid.","Both sizing forms can be applied in various layout contexts, including common blocks, Flexbox, and Grid.",{"text":795,"isCorrect":44,"rationale":796},"Intrinsic sizing uses relative units like percentage, while extrinsic uses pixels.","Units like percentage and pixels are both forms of extrinsic sizing, since the developer is defining the size rule.",{"text":798,"isCorrect":44,"rationale":799},"Intrinsic sizing requires JavaScript to calculate the real size of elements on screen.","The goal of intrinsic sizing is precisely to allow the CSS rendering engine to resolve size without need for manual scripts.","What is the main difference between extrinsic sizing and intrinsic sizing in CSS?",{"options":802,"question":815},[803,806,809,812],{"text":804,"isCorrect":789,"rationale":805},"It shrinks the element down to the width of the largest word present in the text.","`min-content` shrinks the space to the smallest possible without causing overflow, which in text corresponds to the largest indivisible unit (the longest word).",{"text":807,"isCorrect":44,"rationale":808},"It sets the width to zero and forces all content to overflow.","`min-content` seeks the smallest viable size that still accommodates the basic content, not ignoring the existence of the content.",{"text":810,"isCorrect":44,"rationale":811},"It expands the element to fill all available space in the parent container.","This description matches the default behavior of block elements or using `width: 100%`, opposite of `min-content`'s purpose.",{"text":813,"isCorrect":44,"rationale":814},"It calculates the arithmetic mean of all word lengths to define the width.","CSS doesn't use average calculations of characters or words to define `min-content`, but rather the physical limits of line breaks.","How does the `min-content` value behave when applied to the width of a text paragraph?",{"options":817,"question":830},[818,821,824,827],{"text":819,"isCorrect":789,"rationale":820},"It assumes space is infinite and sets the width needed to display content without line breaks.","`max-content` represents the ideal content size on a single line, ignoring container width constraints.",{"text":822,"isCorrect":44,"rationale":823},"It automatically adjusts the content to fit perfectly within the device viewport.","Unlike responsive approaches, `max-content` can easily exceed the viewport if the content is too extensive.",{"text":825,"isCorrect":44,"rationale":826},"It limits the element size to the value defined in the parent container's `max-width` property.","`max-content` doesn't inherently respect the parent's width constraints, which can lead to overflow.",{"text":828,"isCorrect":44,"rationale":829},"It works exactly like `width: auto`, distributing text across multiple lines as needed.","`width: auto` generally tries to fill the available container, while `max-content` avoids line breaks at all costs.","What is the main characteristic of the `max-content` value?",{"options":832,"question":845},[833,836,839,842],{"text":834,"isCorrect":789,"rationale":835},"Because it grows up to the content size, but shrinks if available space is smaller than `max-content`.","`fit-content` combines the expansion of `max-content` with the responsiveness of not exceeding container limits.",{"text":837,"isCorrect":44,"rationale":838},"Because it automatically changes the text color to ensure contrast with the background.","`fit-content` deals exclusively with sizing and has no direct relationship with colors or visual accessibility.",{"text":840,"isCorrect":44,"rationale":841},"Because it ignores the content and focuses only on the browser window dimensions.","Being an intrinsic value, content is the main metric for `fit-content` calculation.",{"text":843,"isCorrect":44,"rationale":844},"Because it's the only one that works in old browsers like Internet Explorer.","Intrinsic sizing values are modern and have limited or no support in very old browsers.","Why is the `fit-content` value often described as the 'smartest' among intrinsic values?",{"options":847,"question":860},[848,851,854,857],{"text":849,"isCorrect":789,"rationale":850},"The horizontal centering of a navigation bar without needing Flexbox or extra containers.","When using `fit-content`, the element only takes up the space of its content, allowing automatic margins to work to center it.",{"text":852,"isCorrect":44,"rationale":853},"The creation of a complex column system that reorganizes itself.","Although it helps with column sizing, reordering is a primary function of layouts like Grid and Flexbox.",{"text":855,"isCorrect":44,"rationale":856},"The automatic adjustment of image height to prevent distortion.","Image distortion is generally controlled by `object-fit` or maintaining the aspect ratio, not specifically by horizontal `fit-content`.",{"text":858,"isCorrect":44,"rationale":859},"The animation of elements entering and leaving the screen with fade effects.","Fade effects depend on the `opacity` property and transitions, not on the block sizing method.","Which layout technique can be simplified using `width: fit-content` and `margin: auto`?",{"options":862,"question":875},[863,866,869,872],{"text":864,"isCorrect":789,"rationale":865},"The ability to smoothly animate transitions from a fixed value (like 0) to values like `auto` or `fit-content`.","Historically, CSS couldn't calculate intermediate states between fixed and intrinsic values, which `interpolate-size` solved in Chrome 129+.",{"text":867,"isCorrect":44,"rationale":868},"A way to increase font size proportionally to screen width without Media Queries.","Font resizing is based on units like `vw` or `clamp()`, not on interpolating intrinsic block sizes.",{"text":870,"isCorrect":44,"rationale":871},"The automatic compression of images to speed up page loading.","This is an asset optimization task and has no relation to the CSS property animation engine.",{"text":873,"isCorrect":44,"rationale":874},"A tool to create animated gradients that change color based on element size.","`interpolate-size` focuses on dimensions (sizing) and not on manipulating colors or background gradients.","Regarding support for animating intrinsic values, what did the `interpolate-size` property introduce in 2024?",{"options":877,"question":888},[878,880,882,885],{"text":153,"isCorrect":789,"rationale":879},"By applying `min-content`, the figure container shrinks to its smallest indivisible element (the width of the image), causing the caption to adjust to that space.",{"text":158,"isCorrect":44,"rationale":881},"If the caption is too long, `max-content` would make the container expand to fit all the text in one line, ignoring the image width.",{"text":883,"isCorrect":44,"rationale":884},"100%","A value of 100% would make the `\u003Cfigure>` occupy the entire width of the parent, regardless of the internal image size.",{"text":886,"isCorrect":44,"rationale":887},"fit-content(100px)","Capping at 100px could cut off or end up smaller than the original image, not guaranteeing that the container properly 'hugs' the image.","Consider a `\u003Cfigure>` element containing an image and a caption. Which width value applied to the `\u003Cfigure>` ensures it is no wider than the image itself?",{"options":890,"question":903},[891,894,897,900],{"text":892,"isCorrect":789,"rationale":893},"Defines a maximum limit (ceiling) for the element's expansion, even if the content wants to grow larger.","The `fit-content(x)` function behaves like normal `fit-content`, but replaces `max-content` with the value `x` if the content exceeds this limit.",{"text":895,"isCorrect":44,"rationale":896},"Indicates how many times the content should be multiplied inside the container.","CSS does not have a sizing function that duplicates visual content based on a numeric multiplier.",{"text":898,"isCorrect":44,"rationale":899},"Represents the ratio between the element's height and width (aspect ratio).","Screen proportion is controlled by the `aspect-ratio` property, not by intrinsic sizing values.",{"text":901,"isCorrect":44,"rationale":902},"Defines the animation speed when the element changes size.","Speeds and durations are defined in transition properties (`transition-duration`), not in width calculations.","What is the function of the `x` parameter in `fit-content(x)`?",{"options":905,"question":918},[906,909,912,915],{"text":907,"isCorrect":789,"rationale":908},"width, height, flex-basis, and Grid track definitions.","These values are versatile and can control size on horizontal axes, vertical axes, and in modern layout systems.",{"text":910,"isCorrect":44,"rationale":911},"Only in the width property, being forbidden in heights.","Although horizontal use is more common, they work perfectly for defining element height behavior.",{"text":913,"isCorrect":44,"rationale":914},"Exclusively inside @media query rules.","They are property values and can be used anywhere in the stylesheet, regardless of media queries.",{"text":916,"isCorrect":44,"rationale":917},"Only in text elements like \u003Cspan> and \u003Cp>.","They can be applied to any block or inline-block element, including containers, images, and entire sections.","In which layout properties can the values `min-content`, `max-content`, and `fit-content` be used?",{"options":920,"question":933},[921,924,927,930],{"text":922,"isCorrect":789,"rationale":923},"The item will maintain its $500px$ width and overflow outside the parent container.","`max-content` prioritizes content integrity as calculated in infinite space, ignoring the physical constraint of the parent.",{"text":925,"isCorrect":44,"rationale":926},"The item will be forced to shrink to $300px$ to respect the parent.","This 'respecting the limit' behavior is characteristic of `fit-content`, not `max-content`.",{"text":928,"isCorrect":44,"rationale":929},"The browser will automatically hide the overflowing content without the need for extra CSS.","The visibility of the overflow depends on the `overflow` property; by default, the content merely leaks out visually.",{"text":931,"isCorrect":44,"rationale":932},"The text inside the item will be broken into multiple lines until it reaches the $300px$.","`max-content` precisely avoids forced line breaks, seeking to keep the content in its most horizontally extended form.","What happens if you use `max-content` on an item whose ideal width is $500px$, but the parent container only has $300px$?",{"type":60,"attrs":935},{"id":936},"p_xlq8fmwi","Intrinsic CSS: min-content, max-content and fit-content","Still using fixed width and fighting overflow? CSS has three intrinsic values that let content pick its own size — and they've worked for years.","2026-08-24T14:53:53.315534+00:00",[941,957,974,988],{"id":942,"slug":943,"title":944,"excerpt":945,"image":946,"featured":44,"groupId":947,"publishedAt":948,"readingTime":949,"views":48,"author":950,"category":951,"tags":952},"841890b2-1a8c-43d4-b434-b94714705605","debugging-css-the-forgotten-margin-and-frontend-lessons","Debugging CSS: The Forgotten Margin and Frontend Lessons","A forgotten CSS property turned a minor layout glitch into a two-week ordeal. Learn how to avoid emotional debugging and fix complex UI issues faster.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1767745741814-featured-i6p1gc.jpeg","bcaf503a-15c1-4d28-8795-6ae3c2a3e06f","2026-08-02T16:09:35.153874+00:00",8,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[953,954],{"slug":54,"name":55},{"slug":955,"name":956},"performance","Performance",{"id":958,"slug":959,"title":960,"excerpt":961,"image":962,"featured":44,"groupId":963,"publishedAt":964,"readingTime":23,"views":48,"author":965,"category":966,"tags":967},"d5167910-cc5b-4fae-a2e8-d09adcf354b2","stop-using-usememo-wrong-a-practical-guide-to-react-performance","Stop Using useMemo Wrong: A Practical Guide to React Performance","Master React useMemo with this guide. Learn when to memoize, how to fix dependency array bugs, and why over-optimization can hurt your performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1769657096789-featured-r2q2sb.jpeg","a1c571c1-aa37-404d-ac67-f265c8a9985b","2026-07-08T23:34:34.563653+00:00",{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[968,971],{"slug":969,"name":970},"javascript","JavaScript",{"slug":972,"name":973},"react","React",{"id":975,"slug":976,"title":977,"excerpt":978,"image":979,"featured":44,"groupId":980,"publishedAt":981,"readingTime":982,"views":48,"author":983,"category":984,"tags":985},"f1b5af43-20da-4150-a7c7-ef17675d1fee","css-animations-how-to-build-performant-professional-interfaces-without-messy-code","CSS Animations: How to Build Performant, Professional Interfaces Without Messy Code","Bring your web interfaces to life. Learn when to use CSS transitions versus keyframes and how to optimize your animations for peak performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1770952624247-featured-in9pir.jpeg","de5a7726-1227-4080-b572-9d91a37b207b","2026-07-04T03:00:53.174696+00:00",17,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[986,987],{"slug":54,"name":55},{"slug":955,"name":956},{"id":989,"slug":990,"title":991,"excerpt":992,"image":993,"featured":44,"groupId":994,"publishedAt":995,"readingTime":996,"views":48,"author":997,"category":998,"tags":999},"86e804a8-71f4-4985-a013-d6c033e28967","angular-micro-frontends-how-to-scale-large-applications-and-eliminate-monolithic-build-times-with-module-federation","Angular Micro-frontends: How to Scale Large Applications and Eliminate Monolithic Build Times with Module Federation","Discover how to break down large Angular monoliths using Module Federation to enable independent deployments and seamless team scaling.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1774499855857-featured-x9ugz1.jpg","a029aa9b-573b-4e5b-921b-eaecea6e989f","2026-06-21T06:41:59.230237+00:00",10,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[1000,1003,1004],{"slug":1001,"name":1002},"angular","Angular",{"slug":969,"name":970},{"slug":244,"name":1005},"TypeScript",{"pt":1007,"en":40,"es":1008},"voce-esta-dimensionando-elementos-do-jeito-errado-e-o-css-ja-tem-a-solucao-ha-anos","estas-dimensionando-elementos-de-la-manera-equivocada-y-el-css-ya-tiene-la-solucion-desde-hace-anos"]