1

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 firefox result

Chrome display chrome result

Thanks

Brian
  • 3,850
  • 3
  • 21
  • 37
igauravsehrawat
  • 3,696
  • 3
  • 33
  • 46

1 Answers1

2

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;
}
yakutsa
  • 642
  • 3
  • 13
  • can you describe it more. height 100% should work right? what went wrong! – igauravsehrawat Jul 31 '15 at 08:44
  • 1
    @igaurav, I hope this comment helps you. [Height 100% on flexbox column child](http://stackoverflow.com/questions/20959600/height-100-on-flexbox-column-child) – yakutsa Jul 31 '15 at 09:49