火狐html的宽度,html - Firefox flexbox image width - Stack Overflow

I'm having some trouble getting my image to take up no more than 100% of the available width of the parent container. I'm only noticing the issue in Firefox 36 (not IE or Chrome). So is it a firefox bug or am I missing something here?

Note: The image should never be larger than it's original size.

Chrome:

Firefox:

.container {

width:300px;

}

.flexbox {

display:flex;

}

.flexbox .column {

flex:1;

background-color: red;

}

.flexbox .middleColumn {

flex:3;

}

.flexbox .middleColumn img {

width:auto;

height:auto;

max-width:100%;

max-height:100%;

align-self: center;

display: block;

}

This is the left column!

This is the right column!