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 absolutely positioned flex container & children.
8     The children's positioning is with respect to the flex container.
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      .abspos {
21        position: absolute;
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: absolute;
32        border: 1px solid black;
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 abspos"/><div class="b"/></div>
50    </div>
51  </body>
52</html>
53