Cross-browser horizontal scroll with flex box

Question

I've being trying to get a consistent horizontal scroll with flex-box.

http://codepen.io/sheriffderek/pen/NABzdQ

Things were going great, but I did that thing ~ where you forget to look at it in Safari and FireFox. Things aren't working great there. Normally, if something works in web-kit but not firefox, webkit is smoothing out something that isn't right / where as firefox follows the rules. So, it's not a bug or anything... but the flexy things aren't really expanding around their child images.

That being said, I can't figure out which part is the pivotal thing that needs to change.

1. I'm using flex-box for the header and 'content' area where the content area grows to fill the remaining space. So, a global column

2. Within the 'content' area, there is a list that is flex and row. In the list there are items with either text or an image. The images should be 100% height of the list, and then auto width.

3. I would have thought that I could set the images to 100% height and width auto (similar to how I do the opposite for small-screens) - but the affect is not the same.

   img { display: block; height: 100%; width: auto; }

4. to deal with this, I use JS to find the height of the 'content' area and set the images to that height.

http://s.codepen.io/sheriffderek/debug/NABzdQ (version with no editor for testing / on iPad etc.)

Works great in Chrome.

So... Does anyone have any advice? My real project is small-screen first, so more complex - but this is a clear example of where things go awry.

Styles

ul
    list-style: none
    margin: 0
    padding: 0

body
    display: flex
    flex-direction: column
    height: 100vh // ?

.header
    // 

.section // content
    display: flex
    flex-grow: 1

.item-list
    display: flex
    flex-direction: row
    flex-grow: 1
    max-width: 100%
    overflow: auto
.item
    display: flex
    flex-grow: 1
a //
    display: block
    display: flex
.image-w
    width: auto // should stretch to fit the child / image
    max-height: 100%
    overflow: hidden //?
    img
        display: block
        width: auto
        // height to be set by JS

.text-w
    width: 400px
    padding: 1rem

Scripts

var setUp = function() {
    $('.item').each( function() {
        var $this = $(this);
        // var $thisFigure = $this.find('.image-w');
        var $thisImage = $this.find('img');
        var thisHeight = $this.outerHeight();
        $thisImage.css({
            height: thisHeight
        });
    });
};

$(window).resize( setUp ).trigger('resize');