flexbox-position-fixed-3.xhtml (1049B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 Testcase with fixed-position flex container. 8 This positioning is with respect to the viewport. 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <style> 13 div.containingBlock { 14 top: 15px; 15 left: 20px; 16 height: 400px; 17 position: absolute; 18 border: 2px dashed purple; 19 } 20 div.flexbox { 21 top: 30px; 22 left: 40px; 23 width: 200px; 24 height: 100px; 25 display: flex; 26 position: fixed; 27 border: 1px solid black; 28 } 29 div.a { 30 flex: 1 0 30px; 31 height: 100px; 32 background: lightgreen; 33 } 34 div.b { 35 flex: 2 0 20px; 36 height: 100px; 37 background: yellow; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="containingBlock"> 43 <div class="flexbox"><div class="a"/><div class="b"/></div> 44 </div> 45 </body> 46 </html>