visibility:collapse on flex items

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

Problem

Chrome treats visibility:collapse as visibility:hidden on flex items

Per the CSS Flexbox spec, a flex item with visibility: collapse should occupy zero main-axis size (width in a row flex) but still contribute its cross-axis size (height) to the line. Chrome was ignoring this and simply hiding the item while preserving its full size in both axes.

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

Live demos

Toggle collapse on the middle item (orange, B) to see the effect. The expected behavior: B should occupy zero width, and the container height should remain 60px (B's cross-size acts as a "strut").

Test 1: Zero main-axis size + strut cross-size
A 40px
B 60px
C 40px
Test 2: Collapsed item with flex-grow
A flex:1
B flex:1
Test 3: Single collapsed item (container should keep cross-size)
B 60px

Expected vs actual

Expected behavior (per spec)

main-axis Collapsed item occupies zero width (in row flex)

cross-axis Container height preserves the collapsed item's height ("strut")

siblings Adjacent items are positioned as if the collapsed item is absent

flex-grow Collapsed items do not participate in flex-grow distribution

Behavior before fix

main-axis Collapsed item still occupies its full width

siblings Adjacent items are shifted as if item is still fully present

Code

<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: B has 0px width, container is 60px tall */
/* Before fix: B has 60px width, same as hidden */

Fix details

Files changed

flex_item.h -- Added is_collapsed flag; size methods return 0 for collapsed items

flex_layout_algorithm.cc -- Detect visibility:collapse; fix gap/margin/spacing calculations

line_flexer.cc -- Freeze collapsed items at zero size during flex resolution

flex_layout_algorithm_test.cc -- 4 new unit tests

WPT test results

pass flexbox_visibility-collapse.html

pass flexbox_visibility-collapse-line-wrapping.html

pass flexbox-collapsed-item-horiz-001.html

remaining 3 tests need full two-pass algorithm (multi-line strut migration)

Links

Issue #41085247 (Chromium tracker)

CSS Flexbox Spec -- Visibility Collapse

Back to index