{"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\/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=\"\/\/codepen.io\/anon\/embed\/95aeaf737efab9c2c1c90ea157c091c6?height=450&amp;theme-id=1&amp;slug-hash=95aeaf737efab9c2c1c90ea157c091c6&amp;default-tab=result\" 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:\/\/caniuse.com\/?search=flex-shrink\" 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\/using-flexbox\/\">&#8220;Using Flexbox&#8221;<\/a> or <a href=\"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=\"http:\/\/www.w3.org\/TR\/css3-flexbox\/#flex-shrink\" rel=\"noopener\">flex-shrink in the spec<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/flex-shrink\" rel=\"noopener\">flex-shrink at MDN<\/a><\/li><li><a href=\"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\/snippets\/css\/a-guide-to-flexbox\/\">A guide to Flexbox<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/using-flexbox\/\">Using Flexbox<\/a><\/li><li><a href=\"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 article\" 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\/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\/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:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/author\/mmatuzo\/\" aria-label=\"Author page of Manuel Matuzovic\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/fee3aee3642c55f15adfcbeab11e6bb6?s=80&#038;d=retro&#038;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\/author\/mmatuzo\/\">\n      Manuel Matuzovic    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/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:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/author\/kevinpowell\/\" aria-label=\"Author page of Kevin Powell\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/3927862337dce65b8bbdbd977044389f?s=80&#038;d=retro&#038;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\/author\/kevinpowell\/\">\n      Kevin Powell    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/author\/levin-mejia\/\" aria-label=\"Author page of Levin Mejia\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/e7a85bfc3e864da5dafd2ea71f03d49f?s=80&#038;d=retro&#038;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\/author\/levin-mejia\/\">\n      Levin Mejia    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/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:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/profile-pic.png?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"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 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. When omitted, it is set to 1 and [&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":{"_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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":13976,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex\/","url_meta":{"origin":21256,"position":0},"title":"flex","date":"August 31, 2011","format":false,"excerpt":"The flex property is a sub-property of the Flexible Box Layout module. This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink and flex-basis) are optional. Syntax flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] .flex-item { \/* this *\/ flex: 1 100px; \/*\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21059,"url":"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/","url_meta":{"origin":21256,"position":1},"title":"A Complete Guide to Flexbox","date":"April 8, 2013","format":false,"excerpt":"Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.","rel":"","context":"In \"flexbox\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":21208,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-self\/","url_meta":{"origin":21256,"position":2},"title":"align-self","date":"April 19, 2013","format":false,"excerpt":"The align-self property is a sub-property of the Flexible Box Layout module. It makes possible to override the align-items value for specific flex items. The align-self property accepts the same 5 values as the align-items: flex-start: cross-start margin edge of the item is placed on the cross-start line flex-end: cross-end\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21202,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-grow\/","url_meta":{"origin":21256,"position":3},"title":"flex-grow","date":"April 18, 2013","format":false,"excerpt":"The flex-grow property is a sub-property of the Flexible Box Layout module. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take\u2026","rel":"","context":"In \"flex-grow\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21085,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/","url_meta":{"origin":21256,"position":4},"title":"align-content","date":"April 17, 2013","format":false,"excerpt":"The\u00a0align-content\u00a0property is a sub-property of the\u00a0Flexible Box Layout module. It helps to align a flex container\u2019s lines within it when there is extra space in the cross-axis, similar to how\u00a0justify-content\u00a0aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line. The\u00a0align-content\u00a0property\u2026","rel":"","context":"In \"align-content\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21263,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-basis\/","url_meta":{"origin":21256,"position":5},"title":"flex-basis","date":"April 19, 2013","format":false,"excerpt":"The flex-basis property is a sub-property of the Flexible Box Layout module. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero. .element { flex-basis: 100px; }\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_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}]}}