min-content is an intrinsic size based on content; it may require measurement or reuse cached results, depending on context.

1. What is min-content (from an engine perspective)

Specification definition:

min-content width = the minimum width of the content without avoidable overflow.

Simply put:

width: min-content;

Equivalent to:

把内容压缩到极限，但不能破坏内容本身

For example:

<div>supercalifragilisticexpialidocious</div>

min-content width = width of the longest word

Because it cannot be disconnected.

2. Why does this cause performance issues?

Key:

The browser cannot directly know the min-content width When cached results are unavailable, relevant subtrees and unbreakable text segments may need analysis.

Valid caches, definite sizes, and containment can reduce repeated work.

Work may include:

layout subtree
→ measure text
→ measure inline fragments
→ measure replaced elements
→ measure nested containers

This is part of the complete layout process.

3. Real calculation process in LayoutNG

The function name below illustrates intrinsic-size calculation, not a public API in a particular version:

ComputeMinContentContribution()

The process is similar:

for child in children:
   if child is text:
       measure all words
       find longest unbreakable segment

   if child is element:
       recursively compute min-content

return max(child contributions)

Note:

This is recursive

Complexity:

概念示意：成本取决于实际访问的内容和缓存

This pseudocode illustrates content dependencies rather than proving exact browser complexity.

4. When cached sizes can be reused

Intrinsic sizes can be cached. Changes to content, fonts, breaking rules, writing mode, or relevant constraints may invalidate the cache; the recalculation scope depends on the implementation.

Changing a parent from 500px to 501px alone does not prove that min-content changes completely or that the whole subtree must be measured again.

5. Intrinsic measurement and final layout

Intrinsic sizing and final layout are related but different. Measurement counts depend on constraints, content, and caching; min-content does not guarantee an additional complete subtree layout.

6. Content sizing constraints in Flexbox

When determining a flex base size, flex-basis:auto first consults the main-size property and falls back to content sizing under the relevant conditions. Automatic minimum sizes and min/max constraints also affect the result; both min-content and max-content are not unconditionally measured.

7. Worst case scenario: Nested Flex + min-content

Structure:

flex
 └ flex
    └ flex
       └ text

Calculation:

Outer flex requires:

min-content of child flex

child flex requires:

min-content of its child flex

Recurse to the end.

Complexity:

嵌套深度和重复测量可能增加工作量

Extreme case:

Actual growth must be checked against caching and layout constraints

8. Real example: Why does a long string get stuck on the page?

For example:

<div style="display:flex">
  <div style="flex:1">
    supercalifragilisticexpialidocious...
  </div>
</div>

The browser must:

measure entire string
find break opportunities
calculate glyph widths

This involves:

font engine
text shaping engine
unicode break iterator

This is an expensive operation.

Not simple strlen()

9. How much slower than normal width:100px?

Fixed width:

width:100px;

Browser:

直接使用 100px
明确宽度可能简化尺寸确定，但排版和绘制其中的文本仍需要工作。

min-content：

layout subtree
measure text
compute intrinsic size

No fixed multiplier can be claimed without measurements on equivalent pages.

10. What has LayoutNG optimized?

LayoutNG optimizations include:

Optimization 1: Cache intrinsic size

Avoid repeating measurements of the same constraint

But the hit rate is limited.

Optimization 2: Avoid unnecessary intrinsic pass

if:

flex-basis: 0;

Browser:

可减少部分基准尺寸测量，但自动最小尺寸等约束仍可能依赖内容。

Performance is greatly improved.

Optimization 3: fragment reuse

Avoid duplicating layout subtrees

But intrinsic sizing still needs to be calculated.

11. How to record performance comparisons

The original 8ms, 25ms, and 40ms figures had no reproducible experiment and have been withdrawn. With identical nodes, fonts, content, and viewport, record Layout duration and traces for zero-basis, auto-basis, and min-content cases without assuming a ranking.

12. The most hidden performance killer combination

flex: 1 1 auto;
white-space: nowrap;

This forces:

max-content calculation
min-content calculation

Very expensive.

13. How to avoid min-content performance problems (core optimization)

The most important optimization:

Optimization 1 (most effective)

Don't use:

flex: 1 1 auto;

Use:

flex: 1 1 0;

Reason:

A zero basis does not eliminate all intrinsic sizing; check min-width, overflow, and readability against the intended layout.

Whether performance improves, and by how much, must be measured on the same page.

Optimization 2

Avoid:

width: min-content;

Use:

width: 200px;

or

flex-basis: 0;

Optimization 3

Avoid deeply nested flex

Optimization 4

Avoid:

white-space: nowrap;

Abuse in flex child elements

14. Essential summary

min-content is slow not because LayoutNG is not optimized enough.

But because:

min-content depends on content and formatting rules; caching and definite constraints can reduce repeated analysis.

It is essentially:

content-dependent sizing

instead of:

constraint-dependent sizing

constraint-dependent sizing is fast.

content-dependent sizing is slow.

15. Ultimate understanding

Example with definite dimensions:

width: 100px;
flex-basis: 0;

Example with content-driven sizing:

width: min-content;
flex-basis: auto;

Because:

Former:

可能减少部分固有尺寸确定工作

The latter:

可能需要内容分析；不代表每次完整遍历子树