visibility: collapse on flex items

#41085247 Filed 2014-01-21 P4 / S5 Component: Blink>Layout>Flexbox

Problem

Spec behavior for flex items with visibility: collapse

In flex layout, a collapsed item should contribute zero main-axis size, but still preserve cross-axis strut behavior.

"If any flex items have visibility: collapse, note the cross size of the line they are in as the item\'s strut size, and restart layout from the beginning. In this second layout round, treat the collapsed items as having zero main size."
- CSS Flexbox Spec, 9.5

Test cases

The strut pre-pass has three tiers to avoid unnecessary work. Each case below exercises exactly one tier.

Tier 1: Single-line + definite cross-size (zero-cost strut)

Container has height:80px (definite). Strut = 80px with no layout needed.

A 30px
C 30px
Expected screenshot for tier1-definite

Tier 2: Single-line + indefinite cross-size (skip line-breaker)

Container has no explicit height (indefinite cross-size). Strut computed via flex + cross-size, no line-breaker. B is 70px tall so cross-size should be at least 70px.

A 30px
C 40px
Expected screenshot for tier2-indefinite

Tier 3: Multi-line (full pre-pass)

Multi-line container (flex-wrap:wrap; width:160px). Full pre-pass needed because line assignments may differ. D is collapsed on line 2; its strut should preserve the 50px line height.

A
B
D 50px
E 25px
Expected screenshot for tier3-multiline

Minimal repro snippet

<div style="display:flex;">
  <div style="width:60px; height:40px;">A</div>
  <div style="width:60px; height:60px; visibility:collapse;">B</div>
  <div style="width:60px; height:40px;">C</div>
</div>

/* Expected in flex layout:
   B width = 0, line cross-size keeps B strut (60px). */

Links

Issue #41085247

CSS Flexbox spec section

Back to index