CODEWITHSUNDEEP
htmlcssgoogle-chromeflexbox
iappwebdev
iappwebdev

Reputation: 5910

Display flex in Chrome with 100% height of child elements

I have a flex layout in follwing fiddle: http://jsfiddle.net/TfB9c/14/

HTML:

<div class="flex-frame">
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
</div>

CSS:

.flex-frame {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.tile {
    width: 25%;
    background-color: #15b575;
    margin: -1px;
    border: 1px inset white;
}
.inner-tile {
    height: 100%;
    background-color: yellow;
}

In Firefox, i get the expected result, in one row, each tiles height is equal:

Firefox

In Chrome this is not the case. What is the error, I can't figure it out?

enter image description here

Upvotes: 1

Views: 2099

Answers (1)

scniro
scniro

Reputation: 16979

You just need to make some modifications and specify display: flex on the parent .tile and flex: 1 to child .inner-tile

JSFiddle Link

Upvotes: 3

Related Questions