I'm running into a problem with the CSS min() function.

Here are a few code snippets to demonstrate my issue (pay attention to the <p> element's styling):

Snippet 1 (<p> width: 100%):

div {
  background-color: lightcoral;
  width: fit-content;
}

p {
  max-width: 100%;
  /* max-width: 100px; */
  /* max-width: min(100px, 100%); */
}

<div>
  <p>
    This is some example text
  </p>
</div>

Snippet 2 (<p> width: 100px):

div {
  background-color: lightcoral;
  width: fit-content;
}

p {
  /* max-width: 100%; */
  max-width: 100px;
  /* max-width: min(100px, 100%); */
}

<div>
  <p>
    This is some example text
  </p>
</div>

Snippet 3 (<p> width: min(100px, 100%)):

div {
  background-color: lightcoral;
  width: fit-content;
}

p {
  /* max-width: 100%; */
  /* max-width: 100px; */
  max-width: min(100px, 100%);
}

<div>
  <p>
    This is some example text
  </p>
</div>

My understanding of the CSS min() function is that it should resolve to whatever the most negative value contained within it's parentheses is. In the context of snippet 3, I would expect the visual output to be the same as snippet 2. However, the actual output of snippet 3 seems to render the <p> element with the width of 100px but the containing <div> element seems to view the <p> element with the 100% width of snippet 2.

My question is - what exactly is the cause of the empty space in snippet 3, and more to the point, how do I resolve it while keeping the CSS min() function?

Any help would be really appreciated and thanks in advance.

CodePudding user response：

The issue is div { width: fit-content; }. width: 100% means 100% of the parents width. As the parent (div) however is specifically set to only be as wide as the content, the width: 100% does nto work anymore. Because then it is now 100% of undefined which is also undefined.

div {
  background-color: lightcoral;
}

p {
  /* max-width: 100%; */
  /* max-width: 100px; */
  max-width: min(100px, 100%);
}

<div>
  <p>
    This is some example text
  </p>
</div>

CodePudding user response：

The min() is working fine but the issue is elsewhere and is related to fit-content. Don't forget that you are using "max-wdith" and you are setting the background color on the div.

Check the below:

div {
  background-color: lightcoral;
  width: fit-content;
}

p {
  /* max-width: 100%; */
  /* max-width: 100px; */
  max-width: min(100px, 100%);
  background: red;
}

<div>
  <p>
    This is some example text
  </p>
</div>

The p element is having a width equal to 100px which confirms that min() is working fine.

Now you need to understand how fit-content works and how percentage interact with it.

From the specification

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. ..

Then you have a very long detailed explanation not easy to grasp but I will use easy words to explain in.

You are using max-width: min(100px, 100%) so you have a percentage sizing. In order to resolve this we need a reference which is the parent width but the latter is define as fit-content meaning that it also depend on the child width. In such case, the browser will first ignore the percentage value to define the parent width.

We get this:

div {
  background-color: lightcoral;
  width: fit-content;
}

p {
  /* max-width: 100%; */
  /* max-width: 100px; */
  /*max-width: min(100px, 100%);*/
}

<div>
  <p>
    This is some example text
  </p>
</div>

Now we have the width of the parent and this one will not more change. Then we calculate the percentage based on that width to get the result you know:

div {
  background-color: lightcoral;
  width: fit-content;
}

p {
  /* max-width: 100%; */
  /* max-width: 100px; */
  /*max-width: min(100px, 100%);*/
}

<div>
  <p>
    This is some example text
  </p>
</div>

<div>
  <p style="max-width: min(100px, 100%)">
    This is some example text
  </p>
</div>

In other words, if you are using percentage in max-width, the fit-content will ignore it. For this reason the 1st and 3rd snippet will give you the same result.

You will also get the same result if you consider width as well.

Here are more examples to show you different cases of percentage where the fit-content will behave the same:

div {
  background-color: lightcoral;
  width: fit-content;
}

<div>
  <p>
    This is some example text
  </p>
</div>

<div>
  <p style="max-width: min(100px, 100%)">
    This is some example text
  </p>
</div>

<div>
  <p style="max-width: min(100px, 10%)">
    This is some example text
  </p>
</div>

<div>
  <p style="width: 50%">
    This is some example text
  </p>
</div>

<div>
  <p style="width: min(100px, 10%)">
    This is some example text
  </p>
</div>

<div>
  <p style="width: 200%">
    This is some example text
  </p>
</div>

<div>
  <p style="width: max(100px, 10%)">
    This is some example text
  </p>
</div>

Whatever the combination of property/values you will use, if percentage is used, the fit-content will always give the same result. It will ignore any property using percentage values to calculate the width of the element.