Question

I use flexboxes in Google Chrome (only this browser has to be supported) to create a dynamic layout. I’ve got n child elements in one div element which should share the whole space with all the same ratio. This is working without problems due to the new introduced flex-boxes. But I also had to set the height of each inner div to 0. If I want to stretch an element inside this div to 100% height it uses the given value of 0 instead of any computed value. As I’ve chosen flex-boxes in order to prevent using javascript I would prefer remaining that way. Is there any other way to make the image’s height filling the div?

And here is the code (only tested in Google Chrome):

html

<div class="flexbox">
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
</div>

css

            .flexbox {
                display:-webkit-box;
                -webkit-box-orient:vertical;
                height:300px;
                width:200px;
            }
            .flexbox > div {
                -webkit-box-flex:1;
                height:0;
                border:solid 1px #000000;
            }
            .flexbox > div > img {
                height:100%;
            }

The code to watch in the browser

Answer 1

Well I got it working after hours of research.
The following changes are to do:

.flexbox {
            display:-webkit-box;
            -webkit-box-orient:vertical;
            height:300px;
            width:200px;
        }
        .flexbox > div {
            -webkit-box-flex:1;
            height:0;
            border:solid 1px #000000;
            position:relative; /* CHANGE */
        }
        .flexbox > div > img {
            height:100%;
            position:absolute; /* CHANGE */
        }

If you’re intrested in you can make these changes via the ChromeDevTools to the css and you’ll see the right result!