Space-around ведет себя по-разному в chrome и firefox, когда столбец / строка одиночные

edit2: я решил это с помощью js getboundrect compare get max-width каждого элемента, к которому они применяют маржу, если происходит перенос. но это грязно, не хочу его использовать. но мне нужно.

Я очистил код, чтобы он применил весь гибкий контейнер, гибкий элемент, если вы укажете соответствующий CssSelector в функции doit (). это будет работать. но это для столбцов.

http://jsfiddle.net/yeaqrh48/1203/

    var debug = true;

    class ertTimer {
      constructor(funcName ,intervalms=3500, maxRunDuration=20000 , StopIfReturnsTrue=true ) {

          this.intervalObj = setInterval(function(){
            console.info("interval - funcName:" + funcName.name);
            try{  
                var res = funcName();

                if (StopIfReturnsTrue)
                    if (res == true)
                        clearInterval(intervalObj);

            } catch(exx){console.warn(exx.message, exx.stack);}
        }, intervalms);
        // after 15 sec delete interval
        setTimeout( function(){ clearInterval( intervalObj ); },maxRunDuration);

        this.intervalms = intervalms;
        this.maxRunDuration = maxRunDuration;
      }

      get getter_intervalms() { return this.intervalms; }
      calcRepeatTimes() { 
       return this.maxRunDuration / this.intervalms;
      }
    }


    var center_ONsingleCol_nonFF = function(contNode, itemSelector) {
      var items = contNode.querySelectorAll(itemSelector);
      //arr.count shoud be 1 element  // items[0].style.alignItems = "center";
      var parItem = items[0].parentNode;
      var parItemR = parItem.getBoundingClientRect();
      var parWidth = parItemR.width;
      var maxItemWidth = 0;

      for (var k = 0; k < items.length; k++) {
        var currItem = items[k].getBoundingClientRect();
        if (currItem.width > maxItemWidth) 
           maxItemWidth = currItem.width;
        //console.info(parWidth, itemWidth);
      }

      var alignItemsVal = getComputedStyle_propValue(parItem , "align-items");
      var flexDirVal = getComputedStyle_propValue(parItem , "flex-direction");


      var iswrapped = isWrapped(contNode ,itemSelector );
      for (var k = 0; k < items.length; k++) {
        if (iswrapped && flexDirVal ==  "column" ){
          if (alignItemsVal == "flex-end"){
            items[k].style.marginRight = "" + ((parWidth - maxItemWidth) * 0.5) + "px";
            items[k].style.marginLeft = "";
          }
          else if (alignItemsVal == "flex-start"){
            items[k].style.marginRight = "";
            items[k].style.marginLeft = "" + ((parWidth - maxItemWidth) * 0.5) + "px";
          }else
          {
            items[k].style.marginRight = "";
            items[k].style.marginLeft = "";
          }
        }
        else{
          items[k].style.marginRight = "";
          items[k].style.marginLeft = "";
        }
      }

    };
    var getComputedStyle_propValue = function(element , CssPropName){
    //var element = document.querySelector( selector );
    var compStyles = window.getComputedStyle(element);
    var comStyle_xxx = compStyles.getPropertyValue(CssPropName);
    return comStyle_xxx;
    };

    var colorizeItem = function(items) {
      for (var k = 0; k < items.length; k++) {
        items[k].style += ";background:Red;";
      }
    };
    var detectWrap = function(contNode, item_selector) {
      var wrappedItems = [];
      var prevItem = {};
      var currItem = {};
      var items = contNode.querySelectorAll(item_selector);
      //console.info("wrapped item arrrat::",items);

      for (var i = 0; i < items.length; i++) {
        currItem = items[i].getBoundingClientRect();
        if (prevItem && prevItem.top > currItem.top) {
          wrappedItems.push(items[i]);
        }
        prevItem = currItem;
      }

      return wrappedItems;
    };
    var isFirefox = function() {
      var _isFF = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
      return _isFF;
    };
    var isWrapped = function(contNode, item_selector){
         var wrappedItems = detectWrap(contNode, item_selector);
        //colorizeItem(wrappedItems);
        if (wrappedItems == null || wrappedItems.length == 0) 
            return true;
        else
          return false;
    };
    var isWired_listenContResize = false;
    var doit = function() {

      if (isFirefox()) {
        console.info("ff already works Right. ");
        return;
      } else {
        console.info("not ff. script will run. ");
      }

      /* flexItem_selector   must be relative to flexCont*/
      var flexContainer_selector = ".flex-cont.cont-resize"; /*specific flex-cont */
      var flexItem_selector = ".flex-item";

      var contList = document.querySelectorAll(flexContainer_selector);
      for (var i = 0; i < contList.length; i++) {
        //no such event   //there is external lib..
        // call doit after you change size in the code;
        if (!isWired_listenContResize) {
          contList[i].onresize = function() {  doit();  };
        }

        center_ONsingleCol_nonFF(contList[i], flexItem_selector);
      }
      isWired_listenContResize = true;


    };

    window.onresize = function(event) {  doit(); };
    window.onload = function(event) { 
      doit(); 
        const et1_ = new ertTimer(doit , 500, 320000,true );

    };