I am working on a Rails application using the Bulma CSS framework. My challenge involves displaying a long list of items in tile format, but unfortunately, they are overflowing off the screen instead of wrapping to the next line.
While checking out the Bulma Documentation, I realized that it doesn't provide a solution for this specific issue. Since my tiles are generated dynamically from a variable-length list, the nested structure mentioned in their documentation isn't practical for me and I prefer a clean wrap to the next line.
This is an example of how my code looks like:
<div class="tile is-ancestor">
<div class="tile is-parent">
<% @my_list.each do |item| %>
<div class="tile is-child box">
<p><%= item %></p>
</div>
<% end %>
</div>
</div>
Considering that Bulma utilizes flexbox, I assumed there might be an equivalent to flex-wrap: wrap;, but I haven't come across this option yet.
Update: It seems that adding the inline style flex-wrap: wrap; to the parent container resolves the issue. However, I am curious if there is a predefined Bulma class for this functionality?