Fluid layout w/ FlexBoxes, borders, margins, padding

Shows how to make layouts with fixed and fluid components, using the whole screen or parent component, Flex Boxes. KEY!: Other solutions don't permit margins, borders, and padding, with out screwing up the layout and getting scrollbars. Flex Boxes do!

by Bill Rebey

HTML

<div id="canvas">
        <div id="containerVert" class="VertFlexContainer StdMargin StdPadding">
            <div id="cell1Vert" class="Deco StdMargin StdPadding">
                FIXED height &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox" onclick="toggleBorders(this)" checked /> Borders
                <input type="checkbox" onclick="toggleMargins(this)" checked /> Margins
                <input type="checkbox" onclick="togglePadding(this)" checked /> Padding
            </div>
            <div id="cell2Vert" class="Deco StdMargin StdPadding">
                PERCENTAGE of Parent height
            </div>
            <div id="cell3Vert" class="Deco StdMargin StdPadding VertFlexContainer FlexFill">
                <div id="containerVertSub" class="VertFlexContainer  StdMargin StdPadding">
                    <div>REMAINDER of Height</div>
                    <div id="subContainer" class="VertFlexContainer Deco StdMargin StdPadding">
                        <div id="container" class="HorFlexContainer  StdMargin StdPadding">
                            <div id="cell1" class="Deco StdMargin StdPadding">
                                FIXED width
                            </div>
                            <div id="cell2" class="Deco StdMargin StdPadding">
                                PERCENTAGE of Parent width
                            </div>
                            <div id="cell3" class="Deco StdMargin StdPadding FlexFill">
                                REMAINDER of width
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

/*  ==============================================================
        Demonstration of how to use Flex Boxes to achieve dynamic/responsive sizing,
        including "all remaining space" sizes in both vertical and horizontal 
        directions, AND allowing for any Margin, Border, and Padding defined 
        by the CSS of the components in the layout.  The key here is that there 
        are no scroll bars in any of the components, (unless the viewport is
        shrunk so far that there's no choice).  As far a I know, this  is impossible
        without flex boxes, and requres lots of JavaScript without them.  Other 
        solutions either can't have margin/border/padding, or require something 
        to be fixed size, or both.  This is the only true "it just works" solution
        that I've found to this problem.
        ==============================================================
    */

    /* This is the "canvas" for the whole application
        It's an un-decorated (no margin/border/paddding) DIV
        for the sole purpose of A) being 100% of the main viewport ("window") size,
        and B) being a Flex box, so that we can put a DECORATED
        container in it (borders, etc.), and have it cover 100% of its parent, 
        while  not getting scroll bars.  This is the only way I know not
        to get scroll bars and still show all decorations without JS.
    */
    #canvas {
        position: absolute;
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: row;
        background: cyan;
        border: 0;
        margin: 0;
        padding: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    /* Flex contianer, components displayed horizontally, left to right */
    .HorFlexContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex: 1; /* this essentially means "use all parent's inner width */
    }
    /* Flex contianer,...

JavaScript

$( document ).ready(function() {
    console.log("LOADED");
});
function  toggleBorders(elm){
    $("div").css("border-width", $(elm).is(':checked') ? "2px" : 0);
}
function  toggleMargins(elm){
    $(".StdMargin").css("margin", $(elm).is(':checked') ? "3px" : 0);
}
function  togglePadding(elm){
    $(".StdPadding").css("padding", $(elm).is(':checked') ? "3px" : 0);
}