{"id":21256,"date":"2013-04-19T08:44:40","date_gmt":"2013-04-19T15:44:40","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21256"},"modified":"2021-08-04T07:43:15","modified_gmt":"2021-08-04T14:43:15","slug":"flex-shrink","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-shrink\/","title":{"rendered":"flex-shrink"},"content":{"rendered":"\n<p>The <code>flex-shrink<\/code> property is a sub-property of the <a href=https://css-tricks.com/"https:////css-tricks.com//snippets//css//a-guide-to-flexbox///">Flexible Box Layout module<\/a>.<\/p>\n\n\n\n<p>It specifies the &#8220;flex shrink factor&#8221; which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn&#8217;t enough space on the row.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  flex-shrink: 2;\n}<\/code><\/pre>\n\n\n\n<p>When omitted, it is set to <code>1<\/code> and the flex shrink factor is multiplied by the flex basis when distributing negative space.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">flex-shrink: &lt;number><\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>To see the full potential of this demo, you would have to be able to resize its width, so please have a look at it on CodePen directly.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_95aeaf737efab9c2c1c90ea157c091c6\" src=https://css-tricks.com/"////codepen.io//anon//embed//95aeaf737efab9c2c1c90ea157c091c6?height=450&amp;theme-id=1&amp;slug-hash=95aeaf737efab9c2c1c90ea157c091c6&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 95aeaf737efab9c2c1c90ea157c091c6\" title=\"CodePen Embed 95aeaf737efab9c2c1c90ea157c091c6\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In this demo:<\/p>\n\n\n\n<ul><li>The first item has <code>flex: 1 1 20em<\/code> (shorthand for <code>flex-grow: 1<\/code>, <code>flex-shrink: 1<\/code>, <code>flex-basis: 20em<\/code>)<\/li><li>The second item has <code>flex: 2 2 20em<\/code> (shorthand for <code>flex-grow: 2<\/code>, <code>flex-shrink: 2<\/code>, <code>flex-basis: 20em<\/code>)<\/li><\/ul>\n\n\n\n<p>Both flex items want to be 20em wide. Because of the flex-grow (first parameter), if the flex container is larger than 40em, the 2nd child will take twice as much leftover space as the first child. But if the parent element is less than 40em wide, then the 2nd child will have twice as much shaved off of it as the 1st child, making it look smaller (because of the 2nd parameter, flex-shrink).<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<ul><li>(modern) means the recent syntax from the specification (e.g. <code>display: flex;<\/code>)<\/li><li>(hybrid) means an odd unofficial syntax from 2011 (e.g. <code>display: flexbox;<\/code>)<\/li><li>(old) means the old syntax from 2009 (e.g. <code>display: box;<\/code>)<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">10+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">20+<\/td><td class=\"has-text-align-center\" data-align=\"center\">22+<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">8+<\/abbr><\/td><td class=\"has-text-align-center\" data-align=\"center\">12.1+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS<\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Chrome Android<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Firefox Android<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Android<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">8+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">12.1+<\/abbr><\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//?search=flex-shrink\%22 rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<p>Blackberry browser 10+ supports the new syntax.<\/p>\n\n\n\n<p>For more informations about how to mix syntaxes in order to get the best browser support, please refer to <a href=https://css-tricks.com/"https:////css-tricks.com//using-flexbox///">&#8220;Using Flexbox&#8221;<\/a> or <a href=https://css-tricks.com/"http:////dev.opera.com//articles//view//advanced-cross-browser-flexbox//#fallbacks\" rel=\"noopener\">this article from DevOpera<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"http:////www.w3.org//TR//css3-flexbox//#flex-shrink\" rel=\"noopener\">flex-shrink in the spec<\/a><\/li><li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//CSS//flex-shrink/" rel=\"noopener\">flex-shrink at MDN<\/a><\/li><li><a href=https://css-tricks.com/"http:////dev.opera.com//articles//view//advanced-cross-browser-flexbox//#fallbacks\" rel=\"noopener\">Advanced cross-browser flexbox<\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//snippets//css//a-guide-to-flexbox///">A guide to Flexbox<\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//using-flexbox///">Using Flexbox<\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//old-flexbox-and-new-flexbox///">Old Flexbox and new Flexbox<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-posts\">Related posts<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-21256\">\n\n  <time datetime=\"2020-11-10\" title=\"Originally published Apr 19, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 18, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//understanding-flex-grow-flex-shrink-and-flex-basis///">\n      Understanding flex-grow, flex-shrink, and flex-basis    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//robinrendle///" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2019//01//me-black-white.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//robinrendle///">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-21256\">\n\n  <time datetime=\"2015-12-26\" title=\"Originally published Apr 19, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 10, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//flex-grow-is-weird///">\n      `flex-grow` is weird. Or is it?    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//mmatuzo///" aria-label=\"Author page of Manuel Matuzovic\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//fee3aee3642c55f15adfcbeab11e6bb6?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/fee3aee3642c55f15adfcbeab11e6bb6?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//mmatuzo///">\n      Manuel Matuzovic    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-21256\">\n\n  <time datetime=\"2019-11-26\" title=\"Originally published Apr 19, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 3, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//the-thought-process-behind-a-flexbox-layout///">\n      The Thought Process Behind a Flexbox Layout    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-21256\">\n\n  <time datetime=\"2019-07-01\" title=\"Originally published Apr 19, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 1, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//making-width-and-flexible-items-play-nice-together///">\n      Making width and flexible items play nice together    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//robinrendle///" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2019//01//me-black-white.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//robinrendle///">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-21256\">\n\n  <time datetime=\"2021-06-10\" title=\"Originally published Apr 19, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 22, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//equal-columns-with-flexbox-its-more-complicated-than-you-might-think///">\n      Equal Columns With Flexbox: It\u2019s More Complicated Than You Might Think    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//kevinpowell///" aria-label=\"Author page of Kevin Powell\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//3927862337dce65b8bbdbd977044389f?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/3927862337dce65b8bbdbd977044389f?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//kevinpowell///">\n      Kevin Powell    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-21256\">\n\n  <time datetime=\"2016-01-15\" title=\"Originally published Apr 19, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 23, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//designing-a-product-page-layout-with-flexbox///">\n      Designing A Product Page Layout with Flexbox    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//levin-mejia///" aria-label=\"Author page of Levin Mejia\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//e7a85bfc3e864da5dafd2ea71f03d49f?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/e7a85bfc3e864da5dafd2ea71f03d49f?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//levin-mejia///">\n      Levin Mejia    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-21256\">\n\n  <time datetime=\"2019-02-18\" title=\"Originally published Apr 19, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 18, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//ie10-compatible-grid-auto-placement-with-flexbox///">\n      IE10-Compatible Grid Auto-Placement with Flexbox    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//bholt///" aria-label=\"Author page of Brian Holt\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2019//02//profile-pic.png?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//bholt///">\n      Brian Holt    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The flex-shrink property is a sub-property of the Flexible Box Layout module. It specifies the &#8220;flex shrink factor&#8221; which determines [&hellip;]<\/p>\n","protected":false},"author":1888,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21256"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1888"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=21256"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21256\/revisions"}],"predecessor-version":[{"id":346036,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21256\/revisions\/346036"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21256"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}