I have a div with display:table;. In that div, I have 2 divs. 1 div has a width:100%, div2 has width:320px
In div1 I have multiple rows, with each row having 3 divs max (some have 1 or 2). I am using display:flex; justify-content:space-around; to nicely align the rows and their divs vertically and horizontally.
The problem here is that when I use display:flex;, all the content of div2 is pushed down below that last row. That is weird since div1 and div2 are next to eachother and the content of div1 is not interfering with div2.
Visual example of problem:
====================================
= div1 = div2 =
====================================
= +++ = =
= +++ = =
= = =
= +++ +++ +++ = =
= +++ +++ +++ = =
= = =
= +++ +++ +++ = =
= +++ +++ +++ = =
= = content =
= = of =
= = div2 =
= = starts =
= = here =
====================================
each ++ is a div inside a row
++
Is there anyway I can get this done properly? Having div1 and div2 next to eachother, while div1 content is using display:flex; justify-content:space-around; and div2 content starts at top and is not being pushed down by div1 content.
EDIT:
Here is my jsFiddle, to show the error. https://jsfiddle.net/3uss54pc/
EDIT 2:
I tried removing the display:flex and instead use float:left; on the .row-div and add a clear:both; at the and of each .row, but the content of div2 is still being pushed downwards.
I guess this is not a problem with the display:flex;, but rather a problem with the structure of my display:table;??
I fixed this problem by removing the flex elements and use a display:table and display:table-cell; instead. This way the div2 content is shown at the right place.