flexkit布局在webkit（chrome / safari）vs moz（firefox）上表现不正确

Question

我正在使用flex，它在mozilla（-moz-）和chrome / safari（-webkit - ）上显示不正确的行为

使用mozilla tutorial了解flex布局

/** {
    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>

更好理解的屏幕截图： Firefox显示

Chrome显示屏

由于

Answer 1

您应该将height: 100%提供给display: flex和height: inherit类，而不是在使用.right-first的课程中使用right-second：

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;
}