flexbox-safe-overflow-position-001.html (1674B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Testing safe overflow-position for align-content, justify-content, and align-items in flex containers</title> 9 <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> 11 <link rel="match" href="flexbox-safe-overflow-position-001-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 .flex { 15 display: flex; 16 width: 85px; 17 height: 65px; 18 border: 1px solid black; 19 align-content: safe flex-end; 20 justify-content: safe center; 21 align-items: safe center; 22 float: left; 23 clear: both; 24 margin-top: 100px; 25 } 26 .rowNoWrap { 27 flex-flow: row nowrap; 28 } 29 .columnNoWrap { 30 flex-flow: column wrap; 31 } 32 .item { 33 border: 1px solid blue; 34 background: lightblue; 35 width: 28px; 36 height: 28px; 37 flex-shrink: 0; 38 } 39 .bigItem { 40 border: 1px solid blue; 41 background: lightblue; 42 width: 28px; 43 height: 90px; 44 flex-shrink: 0; 45 } 46 </style> 47 </head> 48 <body> 49 <div class="flex rowNoWrap"> 50 <div class="item"></div> 51 <div class="item"></div> 52 <div class="bigItem"></div> 53 <div class="item"></div> 54 <div class="item"></div> 55 <div class="item"></div> 56 </div> 57 <div class="flex columnNoWrap"> 58 <div class="item"></div> 59 <div class="item"></div> 60 <div class="item"></div> 61 <div class="item"></div> 62 <div class="item"></div> 63 <div class="item"></div> 64 </div> 65 </body> 66 </html>