I have two div-columns of different height which I like to have the same height. I achieved this using the padding-margin hack with the following css for my div-columns:
Here is a DEMO of that solution.
In this DEMO, you see multipple
Row can have a variable number of columns without stating anything in the markup, and without fixing any width. (the width is always divided evenly between the columns).
Each column is called
ElementsHolder, and can have any number of
Elements you want.
all the column in a row will always have the same height, and the last arrow in the row will fill that space.
In the DEMO you can see 3
Row has the starting point, so no stretch needed there.
Row has 3
ElementsHolder, without stating anything special in the markup, 2 of them will stretch to fill the gap.
Row has 2
ElementsHolder, behave as expected.
notice that the stretching works regardless of the
Elements height. (some of them have 2 or 3 lines of text, and it works perfectly)
If you want to use that technique, you only have to implement the other kind of boxes and arrows (Curve etc..)
The solution is done by using the new CSS flex model.
the direction is set via
Each row has
ElementsHolders that gets equal width.
each one of those
ElementsHolder is also a flex box, but this time his direction is opposite (
the child's of
Arrows, I dont want them to have equal height, but to span excatly the natural height. except the last arrow, that should span the rest of the container.
all of that is achieved using the
flex property with the appropriate values.
More about the flex-model can be found HERE