Width of a flexbox column grows when I sort it, only in Chrome

[thebjorn]

trafficstars

From: http://stackoverflow.com/questions/36263952/width-of-a-flexbox-column-grows-when-i-sort-it-only-in-chrome

I have an array corresponding to items that are displayed in a flex container. The html looks like this:

<div class="body">
  <section id="s1" class="package">1</section>
  <section id="s2" class="package">2</section>
  ...
</div>

and CSS:

.body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

I collect an array, sectionids containing the ids of all <section> elements, and sort this array. To re-display the sections in sorted order I do an insertion sort on the dom nodes so they end up in array order:

  function redisplay() {
    for (var i=1; i < sectionids.length; i++) {
      $(sectionids[i]).insertAfter($(sectionids[i-1]));
    }
  }

JSFiddle

This works great on IE, Edge, and FF, but on Chrome the width of the first column grows every time you sort. The size pops back to where it is supposed to be if I resize the browser, but not if I issue a window.resizeBy/To.

I've found a horrible hack that works (calling the function below after redisplay()), but it seems rather fragile (e.g. extracting $b.width() into a variable doesn't work):

  function fix_chrome() {
    var $b = $('.body');
    $b.width($b.width() + 1);
    $b.width($b.width() - 1);
  }

[philipwalton]

Have you reported this to Chrome?

[kumarharsh]

Have you tried specifying a fixed width to the child elements? This seems to fix it.

https://jsfiddle.net/arz64acd/

[thebjorn]

@philipwalton I have not. (I don't know where I would report it to chrome..)

[thebjorn]

@kumarharsh Specifying a fixed width defeats the purpose, to see why change .body to height: 550px and run with the fixed width child elements (you'll get two very disjoint columns). iow, dynamic resizing of the (.)body element will be broken.

[kumarharsh]

In your example, the elements are jumping for me in Firefox too, although only by 1-2 pixels.

[philipwalton]

@thebjorn http://www.chromium.org/for-testers/bug-reporting-guidelines

[thebjorn]

@kumarharsh are you sure that isn't accounted for by the width of the content?

[thebjorn]

@philipwalton https://bugs.chromium.org/p/chromium/issues/detail?id=607262