How to let DOM elements stack and overflow horizontally instead of vertically in HTML?

Question

Do I need a container that is extra wide and set the elements to inline display or float or something? What if I have two rows, each taking 50% height?

What if the number of elements is undetermined? How to determine the container width?

It seems very hard with div. Do I have to use table?

Also, it seems very hard in pure css, as it's confusing and hard to control the relative width and height at the same time. Do I have to use JS?

What is the easiest and most elegant way of doing this?

Answer 1

Sounds very much like you want to use the CSS attribute: Flexbox

With flex box, you can define the max and min width and height and the max/min number of elements before they fall onto a new line.

The beauty of it is, you let the browser calculate widths, you just define the max, min, margins and padding.

And its all CSS, no javascript required

Take a look at the examples at css tricks and have a play about with it. That link is relatively old so some of the vendor prefixes may not be needed any more.

Hope this helps!

EDIT: Additional info on the flex attribute can be found at Mozilla