w3-CSS append 当内容宽度大于带有 inline-flex 的 div 中的视口宽度时换行

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