<!DOCTYPE html>
<html>

<head>
    <title>Flex 2: Electric Boogaloo</title>
    <style>
        .my-container {
            display: flex;
            border: 1px solid salmon;
        }

        .width-constrained {
            width: 250px;
        }

        .height-constrained {
            height: 250px;
        }

        .column {
            flex-direction: column;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .exception {
            background: rgba(255, 0, 255, 0.5);
            left: 50px;
            top: 50px;
        }

        .width-constrained .exception {
            background: rgba(0, 255, 0, 0.5);
            left: 200px;
        }
    </style>
</head>

<body>
    <h1>FlexBox Tests</h1>
    <p>This tests whether flex-box behaves well with unusual children.</p>
    <p>The boxes are width and height 100px.</p>
    <h2>Row</h2>
    <h3>Width unconstrained</h3>
    <p>With a <code>position: absolute;</code> child</p>
    <div class="my-container">
        <div class="box">1</div>
        <div class="box exception" style="position: absolute;">Absolute</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>With a <code>position: fixed;</code> child</p>
    <div class="my-container">
        <div class="box">1</div>
        <div class="box exception" style="position: fixed;">Fixed</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>With a <code>position: relative;</code> child</p>
    <div class="my-container">
        <div class="box">1</div>
        <div class="box exception" style="position: relative;">Relative</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>With a <code>position: static;</code> child</p>
    <div class="my-container">
        <div class="box">1</div>
        <div class="box exception" style="position: static;">Static</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>With a <code>position: sticky;</code> child</p>
    <div class="my-container">
        <div class="box">1</div>
        <div class="box exception" style="position: sticky;">Sticky</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <h3>Width constrained</h3>
    <p>With a <code>position: absolute;</code> child</p>
    <div class="my-container width-constrained">
        <div class="box">1</div>
        <div class="box exception" style="position: absolute;">Absolute</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>With a <code>position: fixed;</code> child</p>
    <div class="my-container width-constrained">
        <div class="box">1</div>
        <div class="box exception" style="position: fixed;">Fixed</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>With a <code>position: relative;</code> child</p>
    <div class="my-container width-constrained">
        <div class="box">1</div>
        <div class="box exception" style="position: relative;">Relative</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>With a <code>position: static;</code> child</p>
    <div class="my-container width-constrained">
        <div class="box">1</div>
        <div class="box exception" style="position: static;">Static</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>With a <code>position: sticky;</code> child</p>
    <div class="my-container width-constrained">
        <div class="box">1</div>
        <div class="box exception" style="position: sticky;">Sticky</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <div style="height: 2000px"></div>
</body>

</html>
