Margin: auto and padding: %; why does Firefox work differently than Chrome?

Question

css

https://jsfiddle.net/a3hex6Lw/2/      <---- Code
prntscr.com/9n3403                           <---- Screenshot
Image with max-height set, margin: auto in Chrome browser is scaled in original proportion due to increasing margin a; in Firefox it just stretches to fit the width of the parent, margin = 0.
Also, the bottom text is set to padding: 0 5% 5% (padding-bottom: 5%) . In Chrome it is displayed normally, in Firefox it is not. If set by pixels, it works the same way.
How to treat? Browser feature, bug or ignorance of layout?