{"id":243886,"date":"2016-07-26T06:29:34","date_gmt":"2016-07-26T13:29:34","guid":{"rendered":"http:\/\/css-tricks.com\/?p=243886"},"modified":"2019-03-24T07:12:33","modified_gmt":"2019-03-24T14:12:33","slug":"tale-width-max-width","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/tale-width-max-width\/","title":{"rendered":"A Tale of `width` and `max-width`"},"content":{"rendered":"<p>An interesting conversation came up in the comment thread of one of our posts last week, <a href=\"https:\/\/css-tricks.com\/considerations-styling-modal\/\">Considerations for Styling a Modal<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>You might want to limit the width of a modal, right? Kinda gives it that &#8220;modal&#8221; look on larger screens. Let&#8217;s say 600px sounds right. But, you want to make sure it doesn&#8217;t bust outside of its parent element. For example, avoid causing horizontal scrolling on a mobile screen.<\/p>\n<p>How would you do that?<\/p>\n<ol>\n<li><code>width: 600px; max-width: 100%;<\/code><\/li>\n<li><code>width: 100%;  max-width: 600px;<\/code><\/li>\n<\/ol>\n<p>The answer: it doesn&#8217;t really matter, they are the same thing.<\/p>\n<p>Some people&#8217;s <a href=\"https:\/\/twitter.com\/Real_CSS_Tricks\/status\/755431124348735488\" rel=\"noopener\">reactions<\/a>:<\/p>\n<ul>\n<li>The second one is &#8220;more correct&#8221;<\/li>\n<li>Very big difference, actually<\/li>\n<li>The second one would be friendlier to a narrower parent width<\/li>\n<li>The first is garbage<\/li>\n<li>The second describes the behavior in a more logical way<\/li>\n<\/ul>\n<p>I agree it&#8217;s kind of mind bending. They seem like they would be different. <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/pbaQvG?editors=1100\" rel=\"noopener\">A reduced test case<\/a> is always a good plan.<\/p>\n<figure id=\"post-243887\" class=\"align-none media-243887\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/07\/minmaxthing.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>This might be a useful way to think about it: <strong>if the element would render wider than what <code>max-width<\/code> says it can be, <code>max-width<\/code> wins.<\/strong><\/p>\n<p>Scenarios:<\/p>\n<ul>\n<li><strong>Parent is 1000px wide<\/strong>\n<ul>\n<li>Width says element should be 600px wide. That doesn&#8217;t break the max-width rule, so <strong>600px<\/strong> it is!<\/li>\n<li>Width says element should be 1000px wide. That breaks max-width rule, so forces element down to <strong>600px<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Parent is 320px wide<\/strong>\n<ul>\n<li>Width says element should be 600px wide. That breaks the max-width rule which says element can only be at most 320px wide, so <strong>320px<\/strong> it is!<\/li>\n<li>Width says element should be 320px wide. That doesn&#8217;t break the max-width rule, so <strong>320px<\/strong> it is!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Whether the parent element is wider or narrower, these different rulesets end up agreeing with each other. (Although there is a difference when they are flex items.)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An interesting conversation came up in the comment thread of one of our posts last week, Considerations for Styling a Modal.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":319906,"url":"https:\/\/css-tricks.com\/beyond-media-queries-using-newer-html-css-features-for-responsive-designs\/","url_meta":{"origin":243886,"position":0},"title":"Beyond Media Queries: Using Newer HTML &#038; CSS Features for Responsive Designs","date":"September 4, 2020","format":false,"excerpt":"Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we\u2019ll dig into a number tools (revolving around HTML and CSS) we have at the ready, from responsive\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/clamp-website.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":243658,"url":"https:\/\/css-tricks.com\/considerations-styling-modal\/","url_meta":{"origin":243886,"position":1},"title":"Considerations for Styling a Modal","date":"July 18, 2016","format":false,"excerpt":"A modal. A small box that pops up to tell you something important. How hard can it be? Wellllll. Medium hard, I'd say. There's quite a few considerations and a few tricky things to get just right. Let us count the ways. Where in the DOM? I typically plop a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154502,"url":"https:\/\/css-tricks.com\/conditional-media-query-mixins\/","url_meta":{"origin":243886,"position":2},"title":"Conditional Media Query Mixins","date":"October 30, 2013","format":false,"excerpt":"Using a @mixin in Sass for your media queries is useful for a variety of reasons. The most important of which is probably the cognitive ease of having the properties and values you are changing right next to the originals. But another reason is that you then gain the ability\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":308190,"url":"https:\/\/css-tricks.com\/min-max-and-clamp-are-css-magic\/","url_meta":{"origin":243886,"position":3},"title":"min(), max(), and clamp() are CSS magic!","date":"May 11, 2020","format":false,"excerpt":"Nice video from Kevin Powell. Here are some notes, thoughts, and stuff I learned while watching it. Right when they came out, I was mostly obsessed with font-size usage, but they are just functions, so they can be used anywhere you'd use a number, like a length. Sometimes pretty basic\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/kevin-powell-min-max-fontsize.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352328,"url":"https:\/\/css-tricks.com\/proposal-for-css-when\/","url_meta":{"origin":243886,"position":4},"title":"Proposal for CSS @when","date":"September 21, 2021","format":false,"excerpt":"CSS is on a tear lately. Again, I've heard of a brand new thing I've never seen before, and again it's via Miriam: CSS Conditionals. \ud83c\udf89 CSSWG just resolved to adopt @tabatkins when\/else proposal into the next level of CSS Conditionals. Here's the proposal:https:\/\/t.co\/IXEOK7xKcL\u2014 Mia, on Bass (@TerribleMia) September 15,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/css-media-query-when.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":341894,"url":"https:\/\/css-tricks.com\/equal-columns-with-flexbox-its-more-complicated-than-you-might-think\/","url_meta":{"origin":243886,"position":5},"title":"Equal Columns With Flexbox: It\u2019s More Complicated Than You Might Think","date":"June 10, 2021","format":false,"excerpt":"As awesome as flexbox is, what it\u2019s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/three-equal-columns-blueprint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/243886"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=243886"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/243886\/revisions"}],"predecessor-version":[{"id":285338,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/243886\/revisions\/285338"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=243886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=243886"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=243886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}