当flex-wrap开始时，使所有项目具有相同的大小

Question

这是CSS我必须展示一些雪佛龙箭头。它很棒。我唯一的问题是，当flex-wrap开始时，现在多行的项目不再是相同的大小。我希望所有项目总是具有相同的大小。

这可能实现吗？

$itemHeight: 40px;
$arrowModifier: 8;

.statusBar {
    display: flex;
    flex-wrap: wrap;

    &_item {
        display: inline-block;
        background: #fff;
        height: $itemHeight;
        position: relative;
        flex-grow: 1;

        text-align: center;
        line-height: $itemHeight;

        min-width: 110px;

        text-decoration: none;
        color: #333;

        &:hover {
            text-decoration: none;
            color: #333;
        }

        &:before,
        &:after {
            display: inline-block;
            content: "";
            border-style: solid;
            position: absolute;
        }
        &:before {
            left:0;
            border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
            border-color: transparent transparent transparent #f2f2f2;
        }
        &:after {
            right:0;
            border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
            border-color: #f2f2f2 transparent;
        }

    }

}

以下是当flex-wrap导致一个人移动到下一行时箭头的外观：