flex layout behaving incorrectly on webkit(chrome/safari) vs moz(firefox)

Question

I am using flex and it is displaying incorrect behavior on mozilla(-moz-) and chrome/safari(-webkit-)

Used mozilla tutorial to learn about flex layout

/** {
    border: solid;
    border-width: 0 1px;
}*/

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.tab3 {
    display: flex;
    display: -webkit-flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    -moz-flex-flow: row;
    width: 100%;
    height: 100%;
}

.left-pane {
    display: flex;
    display: -webkit-flex;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    flex-flow: column;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    width: 150px;
    height: 100%;
    min-width: 150px;
    background-color: red;
}

.content-list {
    flex: auto;
    -webkit-flex: auto;
    -moz-flex: auto;
    background-color: lightgreen;
}

.left-bottom-content {
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    height: 50px;
    background-color: orange;
}

.right-pane {
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex: auto;
    -webkit-flex: auto;
    -moz-flex: auto;
    height: 100%;
    min-width: 300px;
}

.right-pane-content {
    display: flex;
    display: -webkit-flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    -moz-flex-flow: row;
    flex: auto;
    -webkit-flex: auto;
    -moz-flex: auto;
    width: 100%;
}

.right-first {
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 30%;
    height: 100%;
    background-color: green;
}

.right-second {
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 70%;
    height: 100%;
    background-color: blue;
}

.right-bottom-content {
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 100%;
    height: 100px;
    background-color: yellow;
}

<div class="tab3">
            <div class="left-pane">
                <div class="content-list">
                    <h3>4</h3>
                </div>
                <div class="left-bottom-content">
                    <h3>5</h3>
                </div>
            </div>
            <div class="right-pane">
                <div class="right-pane-content">
                    <div class="right-first cell-3">
                        <h3 class="right-heading">8</h3>
                    </div>
                    <div class="right-second cell-4">
                        <h3 class="some-heading">9</h3>
                    </div>
                </div>
                <div class="right-bottom-content">
                    <h3>7</h3>
                </div>
            </div>
        </div>

Screenshot for better comprehension: Firefox display

Chrome display

Thanks

Answer 1

Instead of using height: 100% in a class using display: flex, you should give height: inherit to .right-first and right-second class:

Working demo

.right-first {
    display: flex;
    flex-flow: column;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 30%;
    height: inherit;
    background-color: green;
}

.right-second {
    display: flex;
    flex-flow: column;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 70%;
    height: inherit;
    background-color: blue;
}