Constrain flexbox extra elements to grow to sibling width

Question

My current situation :

<div class="myparent">
    <div class="myelement">check-icon</div>
    <div class="myelement">check-icon</div>
    <div class="myelement">check-icon</div>
    <div class="myelement">check-icon</div>
    <div class="myelement">check-icon</div>
    <div class="myelement">check-icon</div>
    <div class="myelement">check-icon</div>
    <div class="myelement">check-icon</div>
</div>

.myparent {
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
    border: 1px solid #eeedf3;
    background: #f4f3f8;
}

.myelement {
    flex-direction: column;
    margin: 5px;
    border: 1px solid #eeedf3;
    border-radius: 7px;
    min-width: 200px;
    flex-grow: 1;
    flex-basis: 200px;
    padding: 10px 8px;
    background: white;
    transition: all ease 0.25s;
    max-height: 50px;
    overflow: hidden;
}

https://jsfiddle.net/2gczsnbp/1/

What I'd like to achieve :

Problem is I don't want to remove flex-grow attribute since it will give this (extra space not wanted on the right of first row) :

How can I do this ?