FireboxFlexfox-Static

Showcases a bug in firefox flexbox rendering when combined with absolute positioning.

by Luke May

HTML

<div class="app">

    <!-- 1 -->
    <div class="outer">
        <span class="label small-font">1</span>
        <div class="child">

    <!-- 2 -->
    <div class="outer">
        <span class="label small-font">2</span>
        <div class="child">

    <!-- 3 -->
    <div class="outer">
        <span class="label small-font">3</span>
        <div class="child">

    <!-- 4 -->
    <div class="outer">
        <span class="label small-font">4</span>
        <div class="child">

    <!-- 5 -->
    <div class="outer">
        <span class="label small-font">5</span>
        <div class="child">

    <!-- 6 -->
    <div class="outer">
        <span class="label small-font">6</span>
        <div class="child">

    <!-- 7 -->
    <div class="outer">
        <span class="label small-font">7</span>
        <div class="child">

    <!-- 8 -->
    <div class="outer">
        <span class="label small-font">8</span>
        <div class="child">

    <!-- 9 -->
    <div class="outer">
        <span class="label small-font">9</span>
        <div class="child">

    <!-- 10 -->
    <div class="outer">
        <span class="label small-font">10</span>
        <div class="child">

    <!-- 11 -->
    <div class="outer">
        <span class="label small-font">11</span>
        <div class="child">

    <!-- 12 -->
    <div class="outer">
        <span class="label small-font">12</span>
        <div class="child">

    <!-- 13 -->
    <div class="outer">
        <span class="label small-font">13</span>
        <div class="child">

    <!-- 14 -->
    <div class="outer">
        <span class="label small-font">14</span>
        <div class="child">

    <!-- 15 -->
    <div class="outer">
        <span class="label small-font">15</span>
        <div class="child">

        </div>
        <div class="overlay">
        </div>
    </div>
    <!-- /15 -->

        </div>
        <div class="overlay">
        </div>
    </div>
    <!-- /14 -->

        </div>
        <div class="overlay">
   ...

CSS

* {
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    min-width: 0px;
    min-height: 0px;
}

body {
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
}

.app {
    outline: 1px solid black;
    background-color: #ddd;
    padding: 0 10px 0 10px;
    /* sizing and alignment */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 10px;
}
/* Knockout Template CSS */
.outer {
    background-color: #aaa;
    padding: 1px;
    outline: solid 1px;
    /* sizing and alignment */
    display: flex;
    flex-direction: column;
    flex: 1 1 10px;
    align-items: stretch;
    justify-content: space-around;
    position: relative;
}
.label {
    background-color: #eee;
    padding: 1px;
    /* sizing and alignment */
    display: flex;
    flex: 0 0 8px;
    align-items: stretch;
    justify-content: space-around;
}
.small-font {
    font-size: 6px;
}
.child /*container-inner*/{
    background-color: #ccc;
    padding: 1px;
    width: auto;
    height: auto;
    /* sizing and alignment */
    display: flex;
    flex-direction: row;
    flex: 1 1 50px;
    align-items: stretch;
    justify-content: space-around;
    overflow: auto;
}
.overlay {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-top-width: 1px;
    border-top-style: dotted;
    border-top-color: blue;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: red;
}