How to have 2 columns with flex property in CSS?

Question

I want to have the images in 2 columns but it is showing me only 1 column and an empty space in the container div as you can see in the preview image.

html

    <div class="container">
            <div class="box">
                <img v-for="(backgroundCover, index) in backgroundCovers" :key="index" :src="backgroundCover"
                    :alt="'Random Image ' + index" />
            </div>
        </div>

css

    .container {
    width: 100%;
    margin: 10rpx 30rpx 0;
    display: flex;
    flex-wrap: wrap;
}

.box {
    max-width: 300rpx;
    min-height: auto;
    padding: 10rpx;
    margin-bottom: 20px;
}

.box img {
    border-radius: 7%;
    max-width: 100%;
    height: auto;
    display: block;
}

preview

Answer 1

its been a while but I got the answer and here it is

CSS

.container {
    position: relative;
    display: flex;
    margin: 0rpx 15rpx 0rpx 15rpx;
    min-height: calc(100vh - 140rpx);
    /* background-color: #eee; */
}

.box {
    width: 100%;
    columns: 2;
    column-gap: 40rpx;
    padding-top: 15rpx;
}

.box-cells {
    padding-bottom: 40rpx;
}

.box img {
    border-radius: 15rpx;
    width: 100%;
}

HTML

<div class="container">
            <div class="box">
                <div class="box-cells" v-for="(backgroundCover, index) in backgroundCovers" :key="index">
                    <div>
                        <img :src="backgroundCover" mode='widthFix' alt="N/A img" />
                    </div>
                </div>
            </div>
        </div>