shells/plain/index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>Container Example</title>
        <style>
            #target {
                flex: 1;
                border: none;
            }
            #container {
                display: flex;
            }
            body {
                display: flex;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: 0;
                padding: 0;
            }

            body.devtools-bottom {
                flex-direction: column;                
            }

            body.devtools-bottom #container {
                height: 400px;
                max-height: 50%;
            }

            body.devtools-bottom #target {
                border-bottom: 1px solid #ccc;
            }

            body.devtools-right {
                flex-direction: row;                
            }

            body.devtools-right #container {
                max-width: 40%;
            }

            body.devtools-right #target {
                border-right: 1px solid #ccc;
            }
        </style>
    </head>
    <body class="devtools-bottom">
        <iframe id="target"></iframe>
        <div id="container"></div>
        <script src="build/container.js"></script>
    </body>
</html>