space-around behaving differently in chrome vs firefox when column / row is single

Question

in chrome, space-around doesn't center items if its single column. but in Firefox, it works.

how to make it behave like firefox?

also, keep in mind that text is aligned to the right

---

.flex-cont {
  display: flex;
  justify-content: flex-start;
  flex-flow: column wrap;
  align-content: space-around;
  align-content: space-evenly;
  align-items: flex-end;
}

.flex-item {
  /* display: inline-block; */
  flex: 0 1 auto;
  width: fit-content;
}

http://jsfiddle.net/f6k7xoe0/1/

edit: also I can do this but this messes up text aligning to right :

.flex-cont{
  align-items: center;
}

---

edit: honestly I wouldn't care so much if it was as a hobby, but I added cefsharp(chrome) in my application. will be in production. there is no other way. i have to get that render in the cefsharp.

edit: this is not a duplicate.

• I dont ask WHY it doesn't work. I want a solution
• my output is different. output in the other questions is not even multi-column.

Answer 1

edit2: I solved it via js getboundrect compare get max-width of each item them apply margin if wrap happens. but its messy don't wanna use it. but I have to.

I cleaned up the code to make it apply the all flex-container, flex item if you give appropriate CssSelector in the doit() function. it will work. but this is for columns.

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

    var debug = true;

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

          this.intervalObj = setInterval(function(){
            console.log("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.log(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.log("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.log("ff already works Right. ");
        return;
      } else {
        console.log("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 );

    };