wrong image sizing with scrollbar under firefox

Question

Here's the problem:

For Chrome, Opera, Safari everthing is fine:

chrome, opera, edge thumb-bar

But firefox has a problem:

firefox thumbbar

The problem is caused by the x-scrollbar which pushes each ".thumbs" and their children up. The children keep their aspect/ratio thanks to the combination of height: 100% and object-fit contain, not leaving any gap between them, EXCEPT under firefox. It seems that ".thumbs" doesn't want to wrap correctly around its child image. The height gets adapted, but not the width. I've tried already different combinations of flex: - shorthands, but nothing helped.

    .scroll_wrapper {
      position: relative;
      overflow: hidden;
      height: 100px;
    }

    .thumbs_container {
      position: absolute;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
      flex-flow: row nowrap;
      overflow-x: scroll;
      height: 100%;
      width: 100%;
    }

    .thumbs {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
      flex-flow: column nowrap;
      height: 100%;
    }

    .thumbs_imgs {
      height: 100%;
      object-fit: contain;
    }

    <div class="scroll_wrapper">
      <div class="thumbs_container">
        <div class="thumbs">
          <img src="http://placeimg.com/170/110/any" alt="1" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/115/any" alt="2" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/120/any" alt="3" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/125/any" alt="4" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/130/any" alt="5" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/135/any" alt="6" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/135/any" alt="7" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/140/any" alt="8" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/145/any" alt="9" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/150/any" alt="10" class="thumbs_imgs"/>
        </div>
      </div>
    </div>

Answer 1

I found a solution with a js-workaround:

• firefox bug:

  js loops through the width of each img and gives each parent ".thumbs" the corresponding width.

• x-scrollbar-hide:

  -js gets the height of the outer .scroll-wrapper
  -js gets the difference of .thumbs_container - .thumbs to get the width of the scrollbar (exactly for each browser, because different) -js gives the heights of .scroll-wrapper + scrollbar-height to .thumbs_container

window.onload = function() {
      scrollbarHide()
    }

    function scrollbarHide(){
      var modalThumbsScrollWrapper = document.getElementsByClassName("scroll_wrapper")[0];
      var modalThumbsScrollWrapperHeight = modalThumbsScrollWrapper.offsetHeight;
      var modalThumbsContainer = document.getElementsByClassName('thumbs_container')[0];
      var modalThumbsContainerHeight = modalThumbsContainer.offsetHeight;
      var modalThumbs = document.getElementsByClassName('thumbs')[0];
      var modalThumbsHeight = modalThumbs.offsetHeight;
      var scrollbarHeight = modalThumbsContainerHeight - modalThumbsHeight;
      var newModalThumbsContainerHeight = modalThumbsScrollWrapperHeight + scrollbarHeight;

      modalThumbsContainer.style.height = newModalThumbsContainerHeight + "px";
      modalThumbsWidthCorrectionFF() 
    }

    function modalThumbsWidthCorrectionFF(){  
        var modalThumbs = document.getElementsByClassName('thumbs');
        var modalThumbsLength = modalThumbs.length;
        var modalThumbsImgs = document.getElementsByClassName('thumbs_imgs');
        for (var i = 0; i < modalThumbsLength; i++) {
          modalThumbs[i].style.width = modalThumbsImgs[i].offsetWidth + "px";
        }
    }

.scroll_wrapper {
          position: relative;
          overflow: hidden;
          height: 100px;
        }

        .thumbs_container {
          position: absolute;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flex;
          display: -webkit-flex;
          display: flex;
          flex-flow: row nowrap;
          overflow-x: scroll;
          height: 100%;
          width: 100%;
        }

        .thumbs {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flex;
          display: -webkit-flex;
          display: flex;
          flex-flow: column nowrap;
          height: 100%;
        }

        .thumbs_imgs {
          height: 100%;
          object-fit: contain;
        }

<div class="scroll_wrapper">
          <div class="thumbs_container">
            <div class="thumbs">
              <img src="http://placeimg.com/170/110/any" alt="1" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/115/any" alt="2" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/120/any" alt="3" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/125/any" alt="4" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/130/any" alt="5" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/135/any" alt="6" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/135/any" alt="7" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/140/any" alt="8" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/145/any" alt="9" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/150/any" alt="10" class="thumbs_imgs"/>
            </div>
          </div>
        </div>