CSS Secrets: Better Solutions to Everyday Web Design Problems

by Lea Verou

one of the most useful of which was min-content. This keyword gives us the width of the largest unbreakable element inside the box (i.e., the widest word or image or fixed-width box).

Another value, max-content, would give us the same width as we saw with display: inline-block earlier. And fit-content gives us the same behavior as floats (which is often the same as min-content, but not always).

Don’t forget to include white-space around any - and + operators in calc(), otherwise it’s a parsing error! The reason for this weird rule is forward compatibility: in the future, identifiers might be allowed inside calc(), and they can contain hyphens.