Why is Flex box stacking items from a grid

Question

I'm using masonry.js to create a picture grid.

My html is like this:

<div class="new-starter-grid">
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
</div>

The css that styles these elements is the following:

.new-starter-grid
{
    top: 20%;
    max-width: 60%;
}

.new-starter-grid-item
{
    float: left;
    width: 120px;
    height: 120px;
    border-radius: 3px;
    background: #D26;
    margin-bottom: 10px;
}

This works perfectly, and creates a grid that looks like this:

I'm now trying to wrap the grid in a container (that also blacks out the screen) and display it in the centre.

To do this, I simply wrap the grid element with another div, like this:

<div class="new-starter-modal">
    <div class="new-starter-grid">
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
    </div>
</div>

And I use the following styling to attempt to center the grid in the new div:

.new-starter-modal
{
    position: fixed;
    display: flex;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 9999 !important; /* To make sure no pesky components decide to go on top of the this modal */
}

The grid technically gets centered, but it ends up stacking all the items like this:

I obviously don't want this to happen, and would ideally like the grid to stay the same as in picture one, only centered horizontally (which is why I'm using flex box).

Can someone explain me to why this is happening, and how I could fix it?

Answer 1

Try changing max-width to width on new-starter-grid. That, or add flex:1 to work alongside the max-width. Otherwise, your grid element has nothing specifying how wide it should be and is probably causing the collapse. Additionally, using floats on .new-starter-grid-item seems like it would be fighting the masonry functionality.