w3-CSS append newline when content width greater than viewport width in div with inline-flex

Question

I'm appending a bunch of boxes with w3-card into this div:

<div id="myClasses" class="w3-container" style="display: inline-flex;">

Here's where I append it:

myclasses.append([
     $('<div/>', {"class": "w3-card button", "onclick": "enterThisClass(" + e + ")"}).append([
           $('<h3/>').text(snapshot.val().name)
     ])
])

This works ok, but when I have too many boxes side by side, they just squish together and hide the ones over the edge. How would I make it so it wouldn't squish nor go over the edge, but rather make a new line?

Answer 1

try adding width to the dynamic div. Like 20%. So when you append 5 div's. The 6th div will auto shift below. Try