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 & children. 8 All 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 .fixedpos { 21 position: fixed; 22 left: 5px; 23 border: 2px dotted black; 24 } 25 div.flexbox { 26 top: 30px; 27 left: 40px; 28 width: 200px; 29 height: 100px; 30 display: flex; 31 position: fixed; 32 border: 2px dashed teal; 33 } 34 div.a { 35 flex: 1 0 auto; 36 width: 30px; 37 height: 100px; 38 background: lightgreen; 39 } 40 div.b { 41 flex: 2 0 20px; 42 height: 100px; 43 background: yellow; 44 } 45 </style> 46 </head> 47 <body> 48 <div class="containingBlock"> 49 <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div> 50 </div> 51 </body> 52</html> 53