<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Reftest Reference</title> <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> <meta charset="utf-8" /> <style> div.flexbox { border: 1px dashed black; width: 12px; height: 100px; margin-right: 2px; float: left; } div.halfMainSize { height: 48px; border: 1px solid blue; background: lightblue; } div.hugeMainSize { height: 148px; border: 1px solid purple; background: fuchsia; } div.fullCrossSize { width: 10px; } div.halfCrossSize { width: 4px; } </style> </head> <body> <!-- Single small flex item --> <div class="flexbox"> <div class="halfMainSize fullCrossSize"></div> </div> <!-- Single small flex item with 'margin-left' set to push it to protrude from the far edge of the container (and to shrink as a result) --> <div class="flexbox"> <div style="margin-top: 80px; height: 18px" class="halfMainSize fullCrossSize"></div> </div> <!-- Single small inflexible flex item with 'margin-left' set to push it to protrude from the far edge of the container --> <div class="flexbox"> <div style="margin-top: 80px" class="halfMainSize fullCrossSize"></div> </div> <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> <div class="flexbox"> <div class="halfMainSize fullCrossSize"></div> <div class="halfMainSize fullCrossSize"></div> </div> <!-- and now with some margin on first item, to force second item to wrap: --> <div class="flexbox"> <div style="float: left" class="halfMainSize halfCrossSize"></div> <div style="float: left" class="halfMainSize halfCrossSize"></div> </div> <!-- and now with some margin on second item, again forcing it to wrap: --> <div class="flexbox"> <div style="float: left" class="halfMainSize halfCrossSize"></div> <div style="float: left" class="halfMainSize halfCrossSize"></div> </div> <!-- Single large flex item: overflows (but does not wrap) and is shrunk to fit container's main-size --> <div class="flexbox"> <div style="height: 98px" class="hugeMainSize fullCrossSize"></div> </div> <!-- Single large flex item: overflows (but does not wrap) --> <div class="flexbox"> <div class="hugeMainSize fullCrossSize"></div> </div> <!-- Small flex item, followed by large flex item (which wraps to its own line and then shrink to container's main-size) --> <div class="flexbox"> <div style="float: left" class="halfMainSize halfCrossSize"></div> <div style="float: left; height: 98px" class="hugeMainSize halfCrossSize"></div> </div> <!-- Small flex item, followed by large inflexible flex item (which wraps to its own line and then shrink to container's main-size) --> <div class="flexbox"> <div style="float: left" class="halfMainSize halfCrossSize"></div> <div style="float: left" class="hugeMainSize halfCrossSize"></div> </div> </body></html>