如何告诉Flexbox＆＃34;使这些div的宽度达到100％，除非所有这些div都适合同一行＃34;

Question

考虑这个HTML：

<div class="flexbox-container">
    <div class="flexbox-item">
        Some text.
    </div>
    <div class="flexbox-item">
        Some quite longer, longer, longer text.
    </div>
    <div class="flexbox-item">
        Some other text.
    </div>
</div>

和这个CSS：

.flexbox-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

我怎么能告诉flexbox容器给它的所有子容器100％宽度，除非所有这些适合在同一行，有效占据33.33％？

试过这个：

.flexbox-item {
    min-width: 33%;
    flex-grow: 1;
}

但这并不是我正在寻找的东西，因为只要有两个项目排成一行，第三个就会被包裹。

编辑 - 更多信息：这些div的预期行为是让他们在移动设备上占据100％的宽度，然后只要它们全部适合同一行，就可以证明 - 内容：空间 - 工作之间的魔力。 需要空格。我可以使用断点以更具体的方式执行此操作，但希望一直使用flexbox。

Pen here