2

I have a problem in chrome which does not happen in Firefox.

 <div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
        <div class="flex-3-child"></div>
    </div>
</div>



.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
    width: 100px;
    background-color: blue;
}
.flex-2 {
    position: relative;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: red;
}
.flex-2-child {
    height: 100%;
    width: 100%;
    background-color: green;
}
.flex-3-child {
    height: 100%;
    width: 100%;
    background-color: steelblue;
}

http://jsfiddle.net/michaelch/TfB9c/2/

If you check this fiddle in firefox and in chrome, you will see there is a big difference. flex-2-child and flex-3-child have no height in chrome, but have the behavior which i think is right which both have a 100% height relative to their parent.

Do you know how to have the correct behavior in chrome?

Thanks in advance.

Michael

Michael Chiche
  • 191
  • 1
  • 8

1 Answers1

2

You will get the same result in Chrome as you do in Firefox if you add height: 100%; to your .flex-2 class.

.flex-2 {
    position: relative;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: red;
    height: 100%;                // Add this!
}

If a child's height is defined by a percentage of their parent's height, then the parent's height should be defined.

Classey
  • 21
  • 4