CSS - 仅在包含父项的弹性线时为弹性项目提供边距

Question

我想的越多，看起来越不可行，但我想知道是否有办法根据灵活流程中的布局来控制弹性项目的边距。

屏幕截图最好解释一下：

拍摄的作品＆＃39; div位于一个flex容器中，它是div的兄弟，其中包含移动历史记录。捕获的碎片容器和历史记录本身就是另一个容器中的弹性项目。每个捕获的碎片div具有3px的上边距，以将它们彼此隔开并与历史隔开。

问题是当有足够的空间来显示历史div和“捕获的碎片”时。容器并排，如图所示通过人为地缩小历史div：

当他们像这样并排时，3px的上边距是不必要的 - 我喜欢对手拍摄的部分的顶部＆＃39;排在历史的顶端。

有没有办法用CSS实现这个目标？

这里是相关div的CSS：

div.history_and_captured {
    display: flex;
    flex-wrap: wrap;
}

div.game_history {
    flex-basis: 15em;
    flex-grow: 1;
}

div.captured_pieces_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

HTML：

<div class="history_and_captured">
    <div class="game_history" id="history">
        <!--history widget is created dynamically-->
    </div>
    <div class="captured_pieces_container">
        <div class="captured_pieces" id="captured_pieces_opponent">
            opponent's captured pieces
        </div>
        <div class="captured_pieces" id="captured_pieces_player">
            player's captured pieces
        </div>
    </div>
</div>