Demo of Firefox inline-flex bug

dabblet.css

/* Demo of Firefox inline-flex bug */
.baseline-wrapper {
    overflow: auto;
    white-space: nowrap;
    }

.baseline-wrapper:before {
    content: "";
    position: relative;

    display: inline-block;

    height: 1px;
    width: 100%;
    margin-right: -100%;

    background: red;
    }

.inline-flex {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    vertical-align: baseline;

    padding: 20px 10px;
    border: 1px solid lime;
    }
 .inline-flex:nth-child(3) {
 	display: -moz-inline-box;
 }

dabblet.html

<div class="baseline-wrapper">
    <div class="inline-flex">
        I'm an inline-flex
    </div>

    <div class="inline-flex">
        I'm an inline-flex<br/>
        With a second line
    </div>

    <div class="inline-flex" style="width: 7em; overflow: auto;">
        I'm an inline-flex with an overflow auto
    </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}