Do not fill the width of growable flex containers

Question

I am building a flexbox container, the container width is resizable, each element should fill the container width horizontally and grow to fill the space between them, and additionally stack vertically if there are too many elements for the row.

The problem is that when there is a row with a single element it fills the entire width of the container, this is cause the flex-grow: 1; rule.

If I remove the flex-grow: 1; rule the elements stop growing and does not fill the space between them.

What I want is make elements growable to fill the space between them but don´t fill the entire width of the container.

Expected result:

article{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 800px;
    border: 1px solid blue;
}
section{
    min-width: 200px;
    box-sizing: border-box;
    flex-grow: 1;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

<article>
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
</article>

Answer 1

Use e.g width: 30% instead flex-grow and width with px:

article{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 800px;
    border: 1px solid blue;
}
section{
    min-width: 30%;
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

<article>
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
</article>