Because the column DIVs have 25x25 dimension, which has limited height and is not visually representing a column. Its content overflow the limited row's square area.

The root flex DIV only calculate the dimensions of its direct child elements, which are the column DIVs. Not the overflowing content of the row DIVs. The sum of the direct child elements' dimension determines the dimension of the root flex DIV, which in your initial code's case, a horizontal series of 25x25 square areas.

If you add below CSS code, you'll see the actual space allocated by the column DIVs.

#container > div {
  margin: 5px; /*put surrounding gaps to make the elements' area easy to spot*/
  outline: 1px solid red;
}

To solve the problem, remove this line:

row.style.width = "25px"