<!DOCTYPE html> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html> <head> <title>CSS Test: Testing that visibility:collapse on a flex item in a single-line flex container maintains the containers's cross size, but doesn't otherwise impact flex layout</title> <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> <link rel="match" href="flexbox-collapsed-item-horiz-001-ref.html"> <meta charset="utf-8"> <style> .flexContainer { display: flex; background: yellow; border: 1px dotted black; float: left; margin: 5px; } .flexContainer > * { /* All flex items have 20px base size */ width: 20px; } .collapse { visibility: collapse; } .flexible { flex: 1 auto; } .heightTall { height: 40px; background: purple; } .heightAuto { background: teal; } .heightShort { height: 10px; background: pink; } </style> </head> <body> <!-- FIRST ROW: --> <!-- Just one (collapsed) flex item, which ends up establishing the container's size (even though it's collapsed): --> <div class="flexContainer"> <div class="heightTall collapse"></div> </div> <div style="clear: both"></div> <!-- SECOND ROW: --> <!-- One collapsed flex item, one short flex item. (Container ends up with collapsed item's height) --> <div class="flexContainer"> <div class="heightTall collapse"></div> <div class="heightShort"></div> </div> <!-- (same, but with items in opposite order) --> <div class="flexContainer"> <div class="heightShort"></div> <div class="heightTall collapse"></div> </div> <div style="clear: both"></div> <!-- THIRD ROW: --> <!-- One collapsed flex item, one stretched flex item. (Container and stretched item end up with collapsed item's height) --> <div class="flexContainer"> <div class="heightTall collapse"></div> <div class="heightAuto"></div> </div> <!-- (again, with items in opposite order) --> <div class="flexContainer"> <div class="heightAuto"></div> <div class="heightTall collapse"></div> </div> <div style="clear: both"></div> <!-- FOURTH ROW: --> <!-- One collapsed flex item, one other flex item; both are flexible. (The non-collapsed one should take all of the available width.) --> <div class="flexContainer"> <div class="heightAuto flexible collapse"></div> <div class="heightTall flexible"></div> </div> <!-- (again, with items in opposite order) --> <div class="flexContainer"> <div class="heightTall flexible"></div> <div class="heightAuto flexible collapse"></div> </div> </body> </html>