gap-015.html (1047B)
1 <!DOCTYPE html> 2 <title>Flex gaps</title> 3 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> 5 <link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <meta name="assert" content="Intrinsic min size includes gaps" /> 8 9 <style> 10 .item { 11 flex: 0 0 auto; 12 line-height: 0px; 13 } 14 15 .inline-block { 16 display: inline-block; 17 width: 10px; 18 } 19 20 #reference-overlapped-red { 21 position: absolute; 22 background-color: red; 23 width: 100px; 24 height: 100px; 25 z-index: -1; 26 } 27 </style> 28 29 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 30 31 <div id=reference-overlapped-red></div> 32 33 <div style="display: flex; column-gap: 80px; background: green; height: 100px; width: min-content"> 34 <div class=item> <!-- min: 10 max: 20 --> 35 <div class=inline-block></div><div class=inline-block></div> 36 </div> 37 <div class=item style="width: 10px"></div> 38 </div>