css/css-flexbox/reference/flex-flexitem-childmargin-ref.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Test: childNodes' 'margin' property of flex item'</title>
    <link rel="author" title="Shaofei Cheng" href="mailto:csf178@gmail.com" />
    <meta name="flags" content="" />
    <style>
    #test
    {
        background: blue;
        display: block;
        height:300px;
        position:relative;
    }
    #test>div.flex {
        width: 100px;
        background:red;
    }
    #test>div.fixed
    {
        height: 300px;
        flex:1;
        background:red;
    }
    #test p
    {
        margin:200px 0 0 0;
    }
    </style>

</head>
<body>
<div id="test">
    <div class="fixed">
        <p style="width:100px;height:100px;background:orange;position:absolute;left:0px;bottom:0px;">
        a
        </p>
    </div>
    <div class="flex">
        <p style="width:100px;height:100px;background:green;position:absolute;right:0px;bottom:0px;">
        b
        </p>
    </div>
</div>
</body>
</html>