Inline block (containing images) taking extra width in Firefox - html

Question

I'm designing a responsive, horizontal image gallery, a screenshot of which (in Firefox) is attached below :
Now, the same gallery in chrome,
Although both look almost same, the problem is that, in firefox, the widths of all the three rows are much larger than the actual width, as shown by chrome.
For example, in Chrome, the width of the first row is 4222px, which should be the actual width, however in firefox, the same row has a width of 8708px, which is more than double!
I think this has something to do with the actual image sizes.
Firefox :
Chrome :
Although my gallery's layout is controlled by JavaScript, here is the basic layout :
<div class="gallery-container">
<div class="gallery-background"></div>
<div class="gallery-content">
<div class="gallery-header">
<div class="gallery-title">Open Source Photography</div>
</div>
<div class="gallery-showcase">
<div class="gallery-scrollable">
<div class="gallery-row">
<div class="gallery-image-container">
<img class="gallery-image" />
</div>
<!--All the images of row 1-->
</div>
<br />
<div class="gallery-row">
<div class="gallery-image-container">
<img class="gallery-image" />
</div>
<!--All the images of row 2-->
</div>
<br />
<div class="gallery-row">
<div class="gallery-image-container">
<img class="gallery-image" />
</div>
<!--All the images of row 3-->
</div>
<br />
</div>
</div>
</div>
</div>
</div>
And here is my CSS code :
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic);
html {
min-height: 100%;
height: 100%;
position: relative;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.gallery-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow: hidden;
background-color: #000000;
font-family: 'Open Sans Light', sans-serif;
}
.gallery-background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: repeat;
-webkit-transition : opacity 1s;
-moz-transition : opacity 1s;
-ms-transition : opacity 1s;
-o-transition : opacity 1s;
transition : opacity 1s;
}
.gallery-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 3;
}
.gallery-content .gallery-header {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 10px;
text-align: left;
height: 20px;
background-color: #000000;
z-index: 2;
}
.gallery-content .gallery-header .right {
float: right;
}
.gallery-content .gallery-header .left {
float: left;
}
.gallery-content .gallery-header .alignment-selection {
}
.gallery-content .gallery-header .gallery-title {
font-size: 15px;
color: #eeeeee
}
.gallery-content .gallery-showcase {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.gallery-content .gallery-showcase .gallery-scrollable {
height: 100%;
overflow-y: hidden;
overflow-x: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 20px;
}
.gallery-content .gallery-showcase .gallery-scrollable .gallery-row {
display: inline-block;
height: 33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 20px;
text-align: left;
padding-right: 20px;
white-space: nowrap;
}
.gallery-content .gallery-showcase .gallery-scrollable .gallery-row .gallery-image-container {
display: inline-block;
position: relative;
height: 100%;
margin-right: 15px;
}
.gallery-content .gallery-showcase .gallery-scrollable .gallery-row .gallery-image-container .gallery-image {
height: 100%;
max-height: 100%;
width: auto;
max-width: 100%;
position: relative;
}
PS : Please ignore the different backgrounds, they change periodically, and with a kinda parallax effect. Thanks!
UPDATE :
I tried wrapping each of the images in a container.
I have updated the HTML and CSS codes with the new ones.
Although the extra width taken by firefox is gone, now the problem I'm experiencing is that the image container, which has inline-block display, is not shrinking according to the image's width (I have kinda redesigned the header and changed backgrounds) :
After searching a lot, I found this answer. Quoting from the answer :
Check and be sure their container/parent element does not have a white-space:nowrap. That would cause them to not wrap.
But if I remove the white-space:nowrap, the horizontal scrolling breaks and the images move to the next line.
Can anybody provide me a short hint on what I'm doing wrong?

Answer 1

I fixed it by adding the property :
max-height: 100%;
to .gallery-row