What is the difference between CSS fit-content and max-content?

css width
Vandervals picture Vandervals · Jun 8, 2015 · Viewed 71.4k times · Source

I'm following this article https://css-tricks.com/almanac/properties/w/width/ to try to understand how this rules work.

I have this example:

The article says that fit-content can be used to center a div of unknown width with margin: x auto;

But if you change fit-content for max-content in this example, this is working anyway and they seem to behave always in the same way.

Does anyone know what is the difference between this two rules and in which cases should I use one or the other?

Answer

jiggunjer picture jiggunjer · Aug 31, 2017

fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.

Related questions

How can I make a div not larger than its contents?

I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes.

Read More
How to set up fixed width for <td>?

Simple scheme: <tr class="something"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> I need …

Read More
How to make a div fill a remaining horizontal space?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

Read More