Floating in row <figure> & <figcaption>

Question

I would like to add list of images (using figure and figcaption) in rows which should be responsive.

figcaption should have the same with as the figure.

I was trying this, but it works only when all figcaption have the same height; if not, the result is a mess (change the browser width to see the issue):

figure { display: table; float: left; } 
figcaption { display: table-caption; caption-side: bottom ; }

I also did this that works good on Firefox, but Chrome doesn't see style width: 100% of figcaption.

figure {
 display: inline-block;
 vertical-align: top;
}
img, figcaption {
 vertical-align: bottom;
}
figcaption {
 width: 100%;
 display: table-caption;
 background: #f55544;
}

Please help - I must finish this but I don't have any more ideas to resolve this problem.

Answer 1

This solution uses JavaScript, there may be another solution using only CSS and flex displays but I don't know it right now. It would consist on finding the highest figure, and then setting that height to the rest of the figures like this.

It would be like this:

var fc = document.querySelectorAll("figcaption");
var mh = 0;

// get the maximum height
for (var x = 0; x < fc.length; x++) {
    if (fc[x].offsetHeight > mh) { mh = fc[x].offsetHeight; }
}

// set all the figcaptions with the same maximum height
for (var x = 0; x < fc.length; x++) {
    fc[x].style.height = mh + "px";
}

figure { display: table; float: left; } 
figcaption { display: table-caption; caption-side: bottom ; }

<figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
<figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
    <figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g  veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure><figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
<figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmofgdgdfgdfgfdgd tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
    <figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g  veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>

And you can see it also on this JSFiddle: http://jsfiddle.net/tm4tjp4c/8/