How to use "display: flex" with tables

Question

I have a webpage with 10 drop zones, where each dropzone will display an image thumbnail.

I put the drop zones inside a table to make it look nice: 2 rows, with 5 images per row.

However, I discovered that the dropzone div collapses when I upload an image in row 2.

The css for the dropzones has this:

.drop-zone1, .drop-zone2, .....
{
    display: flex;
    max-width: 120px;
    height: 120px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #3d3d3d; 
}

Div Div Div Div Div (1 - 5)
Div Div Div Div Div (6 - 10)

If I fill all the dropzones 1 thru 5, everything is great.
But once I fill the next row, dropzone 6, that column collapses.

All divs in the 2nd row stay collapsed until I fill them all, then they resize. (Hence the nature of flex.)

Is there a way to get the width stable for all 10, using flex? Or should I go
ahead and remove "flex" and just define the div with height: 120px, width: 120px?

I'm trying to make it responsive, but I know very little right now.