How to start a new column in flex column wrap layout

Question

I want my data to be arranged in columns (top to bottom, left to right) and every heading inside the data should start a new column. There are three constraints:

<

Answer 1

Apparently, the correct solution is to use the break-before or break-after property:

A break is forced wherever the CSS2.1 page-break-before/page-break-after [CSS21] or the CSS3 break-before/break-after [CSS3-BREAK] properties specify a fragmentation break.

At the time of writing, most browsers implement the *-break-* properties incorrectly or do not implement them at all. Consider this answer ahead of its time.

The following demo works in:

• FF33

.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.grid .head {
  width: 25%;
  background: orange;
  border-bottom: thin dotted;
}
.grid .data {
  width: 25%;
  background: yellow;
  border-bottom: thin dotted;
}
/* force column breaks */
.grid .head:nth-child(n + 2) {
  page-break-before: always; /* FF33 */
}

  
Column 1 (3 items)
  
item 1-1
  
item 1-2
  
item 1-3
  
Column 2 (4 items)
  
item 2-1
  
item 2-2
  
item 2-3
  
item 2-4
  
Column 3 (2 items)
  
item 3-1
  
item 3-2
  
Column 4 (1 items)
  
item 4-1

Chromium Version 73.0.3683.75

Does not respect the column break: