Why Does Chrome Not Properly Handle Flexbox Items Added With Jquery?

I was working on some basic flexbox code when I noticed that Chrome showed odd behavior when I added flex items and the direction of the container was set to column or column-rever

Solution 1:

Interesting. You can fix the problem by adding these styles:

#flexbox_container {
  overflow: auto;
}

#flexbox_container::-webkit-scrollbar {
  height: 0;
}

Took a while to figure out that the height of the scrollbar needed to be 0.

Using overflow alone, Chrome seemed to do the following:

1. Add an element.
2. Add a scrollbar if needed.
3. Realize that this was a flexbox and it didn't need a scrollbar.
4. Incorrectly position the last element in a column to the top of the next column.

Remove the scrollbar CSS to see what I'm talking about.

$('button').click(function() {
  $('#flexbox_container').append('<div class="flex_item">Item</div>');
})

#flexbox_container {
  border: 8px solid #ccc;
  padding: 10px;
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
}
#flexbox_container::-webkit-scrollbar {
  height: 0;
}
.flex_item {
  background: #eee;
  margin: 4px;
  padding: 10px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="flexbox_container"><divclass="flex_item">Item</div></div><button>button</button>