0

I'm attempting to style all "columns" rendered by using display: inline-flex, flex-direction: column and flex-wrap: wrap. Styles applied to the container (such as border) are not rendered in subsequent columns as can be seen in this fiddle.

In the fiddle supplied, I'd like to know how to have the #container styles applied to each column - in particular border (as background-color could just as easily be applied to nested divs).

Of course, a hacky solution (such as styling the nested divs' nth-child to have a border-top/bottom) could achieve the visual effect, but it's not dynamic. I need it to work regardless of the height set on the container div.

As far as I'm aware, there is no selector for styling the first element in a flex column or anything that specific, so is there a way to do this without resorting to JavaScript?

Asons
  • 84,923
  • 12
  • 110
  • 165
user3494677
  • 43
  • 3
  • Did you consider using css grids instead of flexbox? Flexbox is meant to create a single row / column. You seem to want to create multiple rows (a grid). – Rob Monhemius Mar 09 '18 at 14:05
  • I reopened the question. You can't target each column with an arbitrary amount of items using CSS, for that you will need script. – Asons Mar 09 '18 at 17:37

0 Answers0