{"id":324840,"date":"2020-11-03T14:20:25","date_gmt":"2020-11-03T21:20:25","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=324840"},"modified":"2020-11-03T14:20:27","modified_gmt":"2020-11-03T21:20:27","slug":"max-inline-size","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-inline-size\/","title":{"rendered":"max-inline-size"},"content":{"rendered":"\n<p><code>max-inline-size<\/code> is a <a href=\"https:\/\/css-tricks.com\/css-logical-properties\/\">logical property<\/a> in CSS that defines the maximum width of an element when the <code>writing-mode<\/code> is horizontal, or the maximum height of the element when the <code>writing-mode<\/code> is vertical.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"2\"><code markup=\"tt\">.element {\n\u00a0 max-inline-size: 500px;\n\u00a0 writing-mode: vertical-lr;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjKLMKB\" src=\"\/\/codepen.io\/anon\/embed\/JjKLMKB?height=600&amp;theme-id=1&amp;slug-hash=JjKLMKB&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjKLMKB\" title=\"CodePen Embed JjKLMKB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>As you might have guessed by the example above, the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/writing-mode\/\"><code>writing-mode<\/code><\/a> property changes the orientation of the text and layout flow by 90 degrees.<\/p>\n\n\n\n<p>The main reason to change the orientation, apart from creating fancy designs, is to accommodate internationalization on a site. Many East Asian scripts such as Chinese, Japanese, and Korean <a href=\"https:\/\/css-tricks.com\/css-logical-properties\/\">can be written horizontally or vertically<\/a>. Using logical properties, we can provide the correct sizing direction of elements based on the user\u2019s writing mode.<\/p>\n\n\n\n<p><a href=\"https:\/\/twitter.com\/jensimmons\" rel=\"noopener\">Jen Simmons<\/a> has an <a href=\"https:\/\/24ways.org\/2016\/css-writing-modes\/\" rel=\"noopener\">article<\/a> and <a href=\"https:\/\/www.youtube.com\/watch?v=Orgz5cOIXIg\" rel=\"noopener\">presentation<\/a> that go deeper into CSS writing modes.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-can-t-we-just-use-the-max-width-property\">Can\u2019t we just use the <code>max-width<\/code> property?<\/h3>\n\n\n<p>Yes! But if you aren\u2019t supporting Internet Explorer, there is no reason not to use <code>max-inline-size<\/code> instead. <code>max-width<\/code> is a physical dimension, so when the writing mode changes, an element keeps its horizontal width size, breaking a layout when it\u2019s set up to be vertical. Logical properties, like <code>max-inline-size<\/code>, can respond to those changes and apply the size in the proper orientation.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">max-inline-size: &lt;'width'>;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-98e7b928\"><li><strong>Initial:<\/strong> <code>auto<\/code><\/li><li><strong>Applies to:<\/strong> same as <code>height<\/code> and <code>width<\/code><\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Percentages:<\/strong> as for the corresponding physical property<\/li><li><strong>Computed value:<\/strong> same as <code>height<\/code> and <code>width<\/code><\/li><li><strong>Animation type:<\/strong> by computed value type<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Length values *\/\nmax-inline-size: 250px;\nmax-inline-size: 5rem;\n\u2028\n\/* Percentage values *\/\nmax-inline-size: 75%;\n\u2028\n\/* Keyword values *\/\nmax-inline-size: auto;\nmax-inline-size: fit-content(5rem);\nmax-inline-size: max-content;\nmax-inline-size: min-content;\n\u2028\n\/* Global values *\/\nmax-inline-size: inherit;\nmax-inline-size: initial;\nmax-inline-size: unset;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<p>When the <code>writing-mode<\/code> is set to <code>vertical-rl<\/code>, the content will rotate, changing the layout. The width of the <code>max-width<\/code> box will rotate with the content. But <code>max-inline-size<\/code> is smart! It leaves its width in tact, regardless of the <code>writing-mode<\/code> value. Toggle the <code>writing-mode<\/code> in the following demo to see the difference between the two.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKMoZaa\" src=\"\/\/codepen.io\/anon\/embed\/KKMoZaa?height=650&amp;theme-id=1&amp;slug-hash=KKMoZaa&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKMoZaa\" title=\"CodePen Embed KKMoZaa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\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\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">41+<\/td><td class=\"has-text-align-center\" data-align=\"center\">57<\/td><td class=\"has-text-align-center\" data-align=\"center\">12.1+<\/td><td class=\"has-text-align-center\" data-align=\"center\">44+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/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\">85+<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">81+<\/td><td class=\"has-text-align-center\" data-align=\"center\">12.2+<\/td><td class=\"has-text-align-center\" data-align=\"center\">59+<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_max-inline-size\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<p>Note that support for using the following functions may differ from support of the property:<\/p>\n\n\n\n<ul><li><code><a href=\"https:\/\/caniuse.com\/mdn-css_properties_inline-size_fit-contenthttps:\/\/caniuse.com\/mdn-css_properties_max-inline-size_fit-content\" rel=\"noopener\">fit-content()<\/a><\/code><\/li><li><code><a href=\"https:\/\/caniuse.com\/mdn-css_properties_max-inline-size_max-content\" rel=\"noopener\">max-content()<\/a><\/code><\/li><li><code><a href=\"https:\/\/caniuse.com\/mdn-css_properties_inline-size_min-contenthttps:\/\/caniuse.com\/mdn-css_properties_max-inline-size_min-content\" rel=\"noopener\">min-content()<\/a><\/code><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card link\" id=\"mini-post-324840\">\n\n  <time datetime=\"2018-08-21\" title=\"Originally published Nov 3, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 31, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/css-logical-properties\/\">\n      CSS Logical Properties    <\/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 link\" id=\"mini-post-324840\">\n\n  <time datetime=\"2019-10-25\" title=\"Originally published Nov 3, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 25, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/bidirectional-horizontal-rules-in-css\/\">\n      Bidirectional Horizontal Rules in CSS    <\/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-324840\">\n\n  <time datetime=\"2020-01-23\" title=\"Originally published Nov 3, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 24, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/building-multi-directional-layouts\/\">\n      Building Multi-Directional Layouts    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/ahmadalfy\/\" aria-label=\"Author page of Ahmad El-Alfy\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/981b46396a22bf5a8190506fe892b3b5?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/981b46396a22bf5a8190506fe892b3b5?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\/ahmadalfy\/\">\n      Ahmad El-Alfy    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-324840\">\n\n  <time datetime=\"2020-10-14\" title=\"Originally published Nov 3, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Aug 23, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/i\/inline-size\/\">\n      inline-size    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/i\/inline-size\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { inline-size: 700px; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/agalante\/\" aria-label=\"Author page of Andr\u00e9s Galante\">\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\/2017\/04\/Ando1.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\/agalante\/\">\n      Andr\u00e9s Galante    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-324840\">\n\n  <time datetime=\"2016-08-13\" title=\"Originally published Nov 3, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/writing-mode\/\">\n      writing-mode    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/writing-mode\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { writing-mode: vertical-rl; }<\/code>\n    <\/a>\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    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>max-inline-size is a logical property in CSS that defines the maximum width of an element when the writing-mode is horizontal, or the maximum height of the element when the writing-mode is vertical. As you might have guessed by the example above, the writing-mode property changes the orientation of the text and layout flow by 90 [&hellip;]<\/p>\n","protected":false},"author":247892,"featured_media":0,"parent":13935,"menu_order":0,"comment_status":"closed","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":323112,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inline-size\/","url_meta":{"origin":324840,"position":0},"title":"inline-size","date":"October 14, 2020","format":false,"excerpt":"inline-size is a logical property that defines the width of an element when the writing-mode is horizontal, or the height of the element when the writing-mode is vertical. .element { \u00a0 inline-size: 700px; \u00a0 writing-mode: vertical-lr; } As you might have guessed by the example above, the writing-mode property changes\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350477,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-size\/","url_meta":{"origin":324840,"position":1},"title":"block-size","date":"August 25, 2021","format":false,"excerpt":"block-size is a CSS logical property that defines the height of an element when the writing-mode is horizontal, or the width of the element when the writing-mode is vertical. .element { block-size: 700px; writing-mode: vertical-lr; } block-size is defined in the CSS Logical Properties and Values Level 1 specification which\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352421,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding-inline\/","url_meta":{"origin":324840,"position":2},"title":"padding-inline","date":"September 23, 2021","format":false,"excerpt":"padding-inline is a CSS logical shorthand property that combines the padding-inline-start and padding-inline-end properties into a single declaration, creating space around an element\u2019s content in the inline (left and right) direction. .element { padding-inline: 30px 60px; writing-mode: vertical-rl; \/* Determines the padding block direction *\/ } When we say that\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350993,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-inline\/","url_meta":{"origin":324840,"position":3},"title":"border-inline","date":"September 2, 2021","format":false,"excerpt":"border-inline is a CSS logical shorthand property that combines border-inline-color, border-inline-style, and border-inline-width into a single declaration, styling an element's borders in the inline (left and right) direction. .element { border-inline: 5px solid red; writing-mode: horizontal-tb; } border-inline is the logical equivalent to physical properties including border-left and border-right (or\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322864,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset-inline-start\/","url_meta":{"origin":324840,"position":4},"title":"inset-inline-start","date":"October 9, 2020","format":false,"excerpt":"inset-inline-start is a CSS property that sets the length that an element is offset in the starting inline direction. It's sort of like declaring left in that it applies to positioned elements and offsets an element in the left direction, except its starting and ending points can changed based on\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322898,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset-inline-end\/","url_meta":{"origin":324840,"position":5},"title":"inset-inline-end","date":"October 9, 2020","format":false,"excerpt":"inset-inline-end is a CSS property that sets the length that an element is offset in the starting inline direction. It's sort of like declaring right in that it applies to positioned elements and offsets an element in the left direction, except its starting and ending points can changed based on\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/324840"}],"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\/247892"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=324840"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/324840\/revisions"}],"predecessor-version":[{"id":324856,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/324840\/revisions\/324856"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13935"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=324840"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=324840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}