html - Firefox: floated containers don't shrink-wrap responsive images properly? -

This is a very strange issue; I hope I remember some special CSS moves, but I'm thinking that this is a firefox bug. Setup is this: A # frame is DIV which is positioned on all four sides. Inside it, there is a # viewerview DIV, which is set to scroll overflow-X and its height is set to 100% (this has become the last important one.) In it, there is a #Paper_ container DIV, which The initial and white space is: aboper. Finally, inside it, there is a bunch of responsive images, whose maximum height is set to 100% - that is Their height never exceeds the height of the container.

This setup is complex because the idea is that #viewport is scrollable, and # Page_ container (which should remove all interior pictures and their total width should be represented) moves inside left and right (I'm hoping to use iScroll on this setup, so #page_container needs the correct width.) #page_container is the right width in Chrome, and when you scroll the # viewport all the way to the right You can see May include no extra white space at the end of the final image.

However in Firefox, #page_container is one way, way, way too big # The previous image has gone well in the #Viewout scroll #page_container, where the giant hands of extra white space were abandoned is. However, this happens only in specific circumstances established by CSS. If I set a specific height on # frames (except for a full position), then white space is greatly reduced (but does not disappear). If I leave # frames alone while setting a specific height at #viewport, the white space also decreases if I set a clear height on the images, then the white space completely disappears.

As far as I can tell that if you create CSS for me, Firefox has to move # Page_contronor, but all believe the images are full size, size after the maximum size is applied And those container heights have not been calculated. Since the images themselves have been altered properly, it leaves a horizontal white space which should not be there.

Here is JSFiddle: (with iScroll Enabled Edition)

HTML:

  & lt; Div id = "frames" & gt; & Lt; Div id = "viewport" & gt; & Lt; Div id = "page_container" & gt; & Lt; Img src = "http://dummyimage.com/1500x1920/000/fff" /> & Lt; Img src = "http://dummyimage.com/1500x1920/000/f33" /> & Lt; Img src = "http://dummyimage.com/1500x1920/000/3f3" /> & Lt; Img src = "http://dummyimage.com/1500x1920/000/33f" /> (... etc ...) & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS:

  #frame {status: absolute; Left: 0; Correct: 0; Top: 0; Bottom: 0; } # Viewport {font-size: 0; Height: 100%; Overflow-x: scroll; Overflow-y: hidden; Status: Relative; } #page_container {float: left; Height: 100%; White-space: Abrop; } IMG {display: inline-block; Height: auto; Maximum-height: 100%; Margin-right: 10px; Status: Relative; Vertical-row: middle; Width: Auto; }  " 
 
 
 I'm not sure that the viewport is necessary, but by removing it and by #page_container Take float to work in Firefox for me. Here's a bella  
  
 and css  
  #frame {status: absolute; Left: 0; Correct: 0; Top: 0; Bottom: 0; Overflow-x: scroll; Overflow-y: hidden; } #page_container {height: 100%; White-space: Abrop; } IMG {display: inline-block; Height: 100%; Margin-right: 10px; } Img: The last child {margin-right: 0; }