JSFiddle - React, Tailwind, and code Playground

by Harold_Buchman

HTML

<body>
<header><-- Resize Me  --></--></header>

    <div id="outerContainer">
        <div id="flexContainer"></div>
    </div>

    <footer>
        <button id="addRandomFlexItems" class="btn btn-secondary">Click To Add A Random Number Of Flex Items</button>
    </footer>

</body>

CSS

:root {
        --headerHeight: 50px;
        --footerHeight: 50px;
        --UpperInnerLeftContainerWidth: 230px;
    }

    body {
        height: calc(100vh - (var(--headerHeight) + var(--footerHeight)));
        margin: 0;
        overflow: hidden;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    header, footer {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: center;
    }

    header {
        height: var(--headerHeight);
        max-height: var(--headerHeight);
        color: grey;
        font-size: xx-large;
        border-bottom: 2px solid gray;
        background-color: lightblue;
    }

    footer {
        position: absolute;
        width: 100%;
        height: var(--footerHeight);
        max-height: var(--footerHeight);
        border-top: 2px solid gray;
        background-color: lightgray;
    }

    #outerContainer {
        height: 100%;
        overflow: scroll;
    }

    #flexContainer {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        background-color: lightyellow;
        border: 2px solid orange;
    }

    .formItem {
        width: 330px;
        height: 70px;
        flex-basis: 330px;
        flex-grow: 1;
        padding: 0 0 0 10px;
        text-align: center;
        background-color: yellowgreen;
        border: 1px solid olive;
    }

    .formSpacer{
        text-align: center;
        font-size: 400%;
        color: lightgray;
        background: none;
    }

    .btn {
        margin-top: 10px;
        padding: 0 1em  0 1em;
        margin: 12px 5px 0 5px;
        color: gray;
        background-color: white;
    }

JavaScript

let formTextItem   = "<div class='formItem'>ITEM</div>";
        let formSpacerItem = "<div class='formItem formSpacer'>SPACER</div>";


        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min) + min);
        }

        function populateFormItems(nItems) {
            for (var i = 1; i <=  nItems; i ++) {
                $('#flexContainer').append(formTextItem);
            }
            padLastFormRow();
        }

        function getFlexLineLengths(heightList) {
            let currentRowHeight = heightList[0];
            let lineLengths = [];
            let count = 0;
            let totalElementsInThisRow = 0;

            for(var elementCount = 0; elementCount < (heightList.length); elementCount ++) {
                let thisElementHeight = heightList[elementCount];

                if(thisElementHeight == currentRowHeight) {
                    totalElementsInThisRow ++;

                } else {
                    lineLengths.push(totalElementsInThisRow);
                    currentRowHeight = thisElementHeight;
                    totalElementsInThisRow = 1;
                }
            }

            lineLengths.push(totalElementsInThisRow);
            return(lineLengths);
        }


        function padLastFormRow() {
            let topList = [];
            let nSpacersToAdd = 0;
            $('#flexContainer').find('.formSpacer').remove();
            $('#flexContainer').find('.formItem').each(function(i, formItem) {
                topList.push($(formItem).position().top);
            });

            let allRowLengths = getFlexLineLengths(topList);
            let firstRowLength  = allRowLengths[0];
            let lastRowLength   = allRowLengths[((allRowLengths.length) - 1)];

            if (lastRowLength < firstRowLength) {
                nSpacersToAdd = firstRowLength - lastRowLength ;
            }

            for (var i =...