Difference Between CSS Fit-Content and Max-Content

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

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

In CSS what is the difference between width: fit-content; and width: fit-content(some_value);?

You need to refer to the specification to find them:

Value: auto | | min-content | max-content | fit-content(<length-percentage>)

This is the Box Sizing Level 3 specification.

Later in the Level 4 you can read:

New values: stretch | fit-content | contain

And

fit-content
Essentially fit-content(stretch) i.e. min(max-content, max(min-content, stretch)).

So fit-content = fit-content(stretch)

stretch
Applies stretch-fit sizing, attempting to match the size of the box’s margin box to the size of its containing block. See § 7.1 Stretch-fit Sizing: filling the containing block.

What's the equivalent of `width: max(100%, fit-content)`?

Instead of trying to set the max between 100% and fitting the content, you should instead set the minumum width of the your <div> to the size of its parent. I was able to reporoduce what you were asking for by setting the container in question (blue box in the example below) to be an inline-block with min width of 100% under its parent (red box in the example below).

This way, the container always takes 100% of its parent until you resize the parent to be smaller than the inner content, in that case, the container doesn't shrink past the content and so the parent (red box) has to scroll.

This works with the display property as flex and inline-block, but not with block, maybe someone here can explain why.

Here is the example, I made the parent (red box) resizable so you can see the solution in action:

.outer {
  width: 500px;
  resize: horizontal;
  overflow: auto;
  border: 5px solid red;
}
.inner {
  display: inline-block; /* or flex */
  min-width: 100%;
  border: 5px solid blue;
  box-sizing: border-box;
}
.content {
  white-space: nowrap;
  background-color: lightGrey;
}

<div class="outer">
  <div class="inner">
    <div class="content">For blue box, max is at red box and min is at content</div>
  </div>
</div>

How do min-content and max-content work?

Note: "width" in this text refers to the "logical width", not CSS's width; that is, the values are also valid for CSS's height, if the language direction is vertical (like east-asian languages) or in flexbox or grid. min-content and max-content are valid values for width, height, min-width, min-height, max-width, max-height and even more properties (like flex-basis).

What are the intrinsic dimensions of a box?

CSS sizing level 3 introduced the concept of intrinsic dimensions - the opposite of extrinsic. An extrinsic dimension of a box is calculated on the box's parent box. For example width: 80% is said an extrinsic dimension as the width of the subject depends on the width of its containing box.

Contrarily to that, width: min-content is said intrinsic as the width of the box is calculated on the dimension of the contents that the box itself contains.

Intrinsic dimensions are properties of the box itself, extrinsic dimensions are only available if the box is placed in the document and in a context that permits these values to be calculated. For example, in CSS-flow (the classic CSS layout mode), as you probably know, height: 20% has only effect if height is defined in the parent element (i.e. it's inheritable); that is a case of an extrinsic dimension that is not calculable (when an extrinsic value is not available, CSS fallbacks to its intrinsic equivalent). Instead height: min-content is always calculable, as it is intrinsic to the box itself, and it is always the same regardless of the box's placement (or the box's absence) in the document.

The definition of min-content and max-content has changed many times over the years but the result always stayed the same, and it is pretty straightforward to grasp. They were originally requested by the community as keywords for width, whose computed value would match the widths of a box when the box is floating. And indeed, the definition of these two properties was originally based on the behavior of float; now they are more generically defined as follows:

`min-content`

https://www.w3.org/TR/css-sizing-3/#min-content

The smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size.

In other words, the smallest width of a box where the box's contents don't overflow the box itself.

A good way to visualize this is using, in fact, float.

/* the computed width of #red in this example 
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }

min-content

(GIF source: http://jsfiddle.net/6srop4zu/)

In the above GIF, the red box's min-content width equals the red box's width at the time the blue box's width is 0px (234px in the GIF, might be different in the jsfiddle).

As you can see, if the red box was made smaller, the word supercalifragilisticexpialidocious would overflow the red box, hence in this case the min-content equals the width of that particular word, as it is the one that takes the most space horizontally.

`max-content`

https://www.w3.org/TR/css-sizing-3/#max-content

A box’s “ideal” size in a given axis when given infinite available space. Usually this is the smallest size the box could take in that axis while still fitting around its contents, i.e. minimizing unfilled space while avoiding overflow.

/* the computed width of #red in this example
   equals to specifying #red { width: max-content } */

#blue        { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }

max-content

(GIF source: http://jsfiddle.net/nktsrzvg/)

In the above GIF, the red box's max-content width equals the red box's width when the blue box's width is infinite (386px in the GIF, might be different in the jsfiddle).

Here, the red box fully takes advantage of the available space on the x axis in the blue box, but without wasting it. The contents are allowed to expand on the relevant axis without restrictions, and the red box wraps them and at the point of maximum expansion.

What about fit-content, stretch and others? These properties are currently being revisited and as such they are not stable (date: July 2018). They will be added here when they get a bit more mature (hopefully soon).

my links align left when i use max width:fit content

You are trying to do the hard way. There is absolutely no reason for using something “new” as min/fit/max-content. Just do it the old way: make the buttons display: block, do the same for the parent (You do not need to use flex everywhere!) and if you want, limit the link width using width: max-content. I would prefer to not limit the width (remove the width: max-content) and let the links span whole line, because some (many?) people could also click to the white space next to the link. And also the :hover effect would span whole line.

Remember that CSS features like min/fit/max-content values, flexboxes and grid, filter property, object-fit property and many others should be used only when it is necessary to use them. Prefer the “old” approach with display: block and inline-block and you will get webpage that is supported by more browsers, usually also draws faster and you use less lines of CSS. I also like using flexbox, but only at places where it makes sense (auto-wrapped series of blocks, boxes in columns etc.).

And please do not override the mouse cursor shape for whole page. How often do you see pages that do that? When the cursor shape changes without some reasonable reason, the user can get confused (because the user is not able to find the cursor) and some users with some specific disabilities can be even unable to work with the page. Changing the cursor is also a thing that should be done only when there is good reason for it.

*{
    margin: 0px;
    padding: 0px;
}
html{
    cursor: url('media/cursor/cursor\ white.cur'), auto;
}
body{
    background-image: url(gridbg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    font-family: fontywonty;
}
@font-face {
    font-family: fontywonty;
    src: url(/media/fonts/RobotoSlab-Light.ttf);
  }
.content{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
}
.page{
    text-align: center;
    background-color: white;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px 3px black;
}
.header{
    color: rgb(26, 26, 26); 
}
.buttons{
    display: block;
}
a.button {
display: block;
margin: auto;
width: max-content;
color: rgb(0, 0, 0);
border: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.349);
}
a.button:hover{
    background: rgb(63, 63, 63);
    background: rgb(187, 187, 187);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>DSM-5</title>
</head>
<body>
    <div class="content">
        <div class="page">
            <div class="header">
                <h1>A comprensive summary of the DSM-5</h1>
            </div>
            <div class="main">
                <div class="source">
                    <p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>    
                </div>
                <div class="buttons">
                    <a href="/pages/Neurodevelopmental-Disorders.html" class="button">neurodevelopmental disorders</a>
                    <a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" class="button">Schizophrenia Spectrum and Other Psychotic Disorders</a>
                    <a href="/pages/Bipolar-and-Related-Disorders.html" class="button">Bipolar and Related Disorders</a>
                    <a href="/pages/Depressive-Disorders.html" class="button">Depressive Disorders</a>
                    <a href="/pages/Anxiety-disorders.html" class="button">Anxiety Disorders</a>
                    <a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" class="button">Obsessive-Compulsive and Related Disorders</a>
                    <a href="/pages/Trauma-and Stressor-Related Disorders.html" class="button">Trauma- and Stressor-Related Disorders</a>
                    <a href="/pages/Dissociative-Disorders.html" class="button">Dissociative Disorders</a>
                    <a href="pages/Somatic-Symptom-and-Related-Disorders.html" class="button">Somatic Symptom and Related Disorders</a>
                    <a href="/pages/Feeding-and-Eating-Disorders.html" class="button">Feeding and Eating Disorders</a>
                    <a href="/pages/Elimination-Disorders.html" class="button">Elimination Disorders</a>
                    <a href="/pages/Sleep-Wake-Disorders.html" class="button">Sleep-Wake Disorders</a>
                    <a href="/pages/Sexual-Dysfunctions.html" class="button">Sexual Dysfunctions</a>
                    <a href="/pages/Gender-Dysphoria.html" class="button">Gender Dysphoria</a>
                    <a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" class="button">Disruptive, Impulse-Control, and Conduct Disorders</a>
                    <a href="/pages/Substance-Related-and-Addictive-Disorders.html" class="button">Substance-Related and Addictive Disorders</a>
                    <a href="/pages/Neurocognitive-Disorders.html" class="button">Neurocognitive Disorders</a>
                    <a href="/pages/Personality-Disorders.html" class="button">Personality Disorders</a>
                    <a href="/pages/Paraphilic-Disorders.html" class="button">Paraphilic Disorders</a>
                    <a href="Other-Mental-Disorders,html" class="button">Other Mental Disorders</a>
                </div>
            </div>
            <div class="footer">
                <sub>created by sidney</sub>
            </div>
        </div>
    </div>
</body>
</html>

CSS Grid auto fit with max-content

I had a similar question when playing around with grid:

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))

If we take a look at the documentation we can see that minmax command is valid:
https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

But in a repeat documentation on csswg, it states one simple rule that disallows all of this from happening;
https://drafts.csswg.org/css-grid/#funcdef-repeat

The generic form of the repeat() syntax is, approximately,

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

The first argument specifies the number of repetitions. The second
argument is a track list, which is repeated that number of times.

However, there are some restrictions:

The repeat() notation can’t be nested.

Automatic repetitions (auto-fill or auto-fit) cannot be combined with
intrinsic or flexible sizes.

Whats an intrinsic or flexible sizes ?

An intrinsic sizing function (min-content, max-content, auto, fit-content()).

So the command wont work in grid because each column/row will be different sizes and wrapping cannot take place. See bellow picture as example.

minmax max-content auto-fit

This behavior should be executed using flex-box instead.