Wrap flex items while fixing the height of flex container to the tallest child

Question

I have 4 div’s in a flex-container and would like to decrease the space between the two div’s indicated in the attached image (Current). I already gave the flex-container the “wrap”-prop. How can I handle that?

Current

Desired

html

<div className="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

css

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;

    div {
        width: 30%;
        min-width: 300px;
    }
}