JSFiddle - React, Tailwind, and code Playground

HTML

In the spec, the main sizes are resolved once and the line breaks are solely a function of the hypothetical main sizes.  
    Here we can see the first line's used cross size affecting the line breaks.<br />
    <button id="toggleBtn">toggle start vs stretch</button>
    <button id="widthToggleBtn">toggle max item width</button>
    <div id="flexbox">
        <div style="height:100px; background:skyblue; margin:10px;">
            this is some really wide content
            <div id="widthItem" style="width:630px;height:50px;"></div>
        </div>
        <div id="toggle" class="start">
            <img src="http://www.webplatform.org/assets/logo-with-text.png" style="width:100%; opacity:0.75; " />
        </div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>

CSS

.item {
            height:100px;
            width:100px;
            background:skyblue; 
            margin:10px;
        }
        #flexbox {
            display:-webkit-flex;
            -webkit-flex-direction:column; 
            -webkit-flex-wrap:wrap; 
            -webkit-align-content:flex-start; 

            display :-ms-flexbox;
            -ms-flex-direction: column; 
            -ms-flex-wrap: wrap; 
            -ms-flex-line-pack: start; 

            display: flex;
            flex-direction: column; 
            flex-wrap: wrap; 
            align-content: flex-start; 

            height:700px; 
            border:thick solid lightblue;
        }

        #toggle {
            background:skyblue; margin:10px;
        }

        .stretch {
            -webkit-align-self: stretch;
            -ms-flex-item-align: stretch;
            align-self: stretch;
        }

        .start {
            -webkit-align-self: flex-start;
            -ms-flex-item-align: start;
            align-self: flex-start;
        }

JavaScript

document.getElementById('toggleBtn').addEventListener('click', function() {
    var e = document.getElementById("toggle");
    e.className = e.className == "start" ? "stretch" : "start";
});

document.getElementById('widthToggleBtn').addEventListener('click', function() {
    var e = document.getElementById("widthItem");
    e.style.width = e.style.width == "500px" ? "700px" : "500px";
});