[css-sizing] Cyclical definition of min-content size

[andrewbaxter]

Here's the path of definitions:

• https://drafts.csswg.org/css-sizing-3/ 5.1 says "The min-content size of a box in each axis is the size it would have if it was a float given an auto preferred size in that axis (and no minimum or maximum size in that axis) and if its containing block was zero-sized in that axis. (In other words, the minimum size it has when sized as “shrink-to-fit”.)" There's a note about this not being specifically defined, but it's not clear if that means within css3 (but it is defined in css2), if that's limited to replaced elements (given the position in the text), or if it refers to the entire min-content sizing.
• https://drafts.csswg.org/css2/ 10.3.5 says "min(max(preferred minimum width, available width), preferred width)." There's a note about this not being specifically defined, but it's unclear if that refers to the entire algorithm or just "preferred width" or "preferred minimum width" which are indeed not defined in css 2 (but do appear to have definitions in css 3).
• preferred width isn't defined in css2
• https://www.w3.org/TR/css-sizing-3/ 3.1.1 defines preferred width as "The width and height (physical) properties specify the preferred width and height of the box, respectively."
• preferred minimum width is defined in css 2 as "calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2 does not define the exact algorithm" i.e. it isn't defined
• https://www.w3.org/TR/css-sizing-3/#min-content defines "preferred minimum width" via the "min-content inline size": "This is called the “preferred minimum width”"
• In the same section, the "min-content inline size" is "The min-content size in the inline axis"
• In the same section, the min-content size is "Formally, the size of the box when sized under a min-content constraint, see § 5 Intrinsic Size Determination. "
• Which takes us back to the start

I asked on SO but it was closed as "not suitable for this site", but this also seems like a spec issue so I thought I'd bring it up here.

I'd guess that at some point there's a definition for minimum size like "text plus text advance, borders, images, padding, margin", but I have this example:

<div
  style="
    max-width: 100%;
    width: min-content;
    display: grid;
    grid-template-columns: 1fr min-content;
  "
>
  <div
    style="
      grid-column: 2;
      border: 1px solid red;
      width: 300px;
      max-width: 100%;
      height: 0.5cm;
    "
  ></div>
</div>

where the inner div is still shown at 300px.

Specifically I was trying to find how to create a div with a 300px default/preferred size but a 2px (border) minimum.

Edit: I can work around this by using an extra grid element with minmax instead of using width on a block element directly:

  <div
    style="
      max-width: 100%;
      width: min-content;
      display: grid;
      grid-template-columns: 1fr min-content;
    "
  >
    <div
      style="display: grid; grid-template-columns: minmax(min-content, 300px)"
    >
      <div style="border: 1px solid red; height: 0.5cm; width: 100%"></div>
    </div>
  </div>

but I'd like to believe this shouldn't be necessary and it should be possible to set preferred width-only in a single element.

In both examples I have width: min-content on the parent to confirm the min-content size, however if that's removed it shows the more natural context, e.g. a window where if larger than 300px it shows at 300px, but if the window is shrunk it shrinks down to 2px.

[Loirooriol]

The min-content size of a box in each axis is the size it would have if it was a float

That's no real definition. Some layouts have a real definition, e.g. https://drafts.csswg.org/css-grid/#intrinsic-sizes. Some layouts don't have a proper definition for intrinsic sizes, or don't have a proper spec at all.

CSS2 10.3.5 says "min(max(preferred minimum width, available width), preferred width)."

This is obsolete terminology. The "preferred minimum width" is actually the min-content size, and the "preferred width" is the max-content size.

but I'd like to believe this shouldn't be necessary and it should be possible to set preferred width-only in a single element.

I'm not sure I understand what you want, maybe width: calc(0% + 300px)?

But this seems unrelated to the cyclic spec definitions. Better keep spec topics here, and leave questions about which code achieves what you want for stackoverflow.

[andrewbaxter]

Better keep spec topics here, and leave questions about which code achieves what you want for stackoverflow.

Okay, sounds good - the only reason I added it was sometimes posting requests for clarification without providing usage context gets push back from project owners.

Some layouts don't have a proper definition for intrinsic sizes, or don't have a proper spec at all.

So, in summary, it's not defined? In that case, stepping back, I would like to propose a method to set the preferred size for a block element without affecting the min-content size -- however, without a more complete spec for min-content size it's not clear if such a method already exists or not.

width: calc(0% + 300px)

I'm not entirely sure how this computes - it indeed makes the min-size 2px, but the preferred size appears to also be 2px and not 300px. TBH I would have expected this to result in a value with a floor of 300px...

Edit: Ah, is that related to cyclic percentage/ #10969 ?

[Loirooriol]

So, in summary, it's not defined?

Not in general. For example, for block containers see #9120

I'm not entirely sure how this computes

Well, grid layout first determines track sizes using intrinsic contributions, so a percentage in width is cyclic and the entire expression is treated as auto. After the track size is known, the item is laid out and the percentage can now be resolved.

[andrewbaxter]

Ah okay, x2.

So that is cyclic percentage.

Since you mentioned this isn't actually defined, then a definition is what I'm most interested in. I'll close this, 9120 seems like what I want.

Thanks!

[myfonj]

I asked on SO […]

Cross-link: https://stackoverflow.com/questions/79573662/how-is-css-min-content-actually-defined