Esta pergunta já tem uma resposta aqui:

É possível fazer com que dois elementos adjacentes se comportem como um único elemento, em um layout de caixa flexível?

Diga que esta é minha marcação:

<div class="flex-container">
   <div>Flower</div>
   <div>Tree</div>
   <div>Bee</div>
</div>

Isto é o que eu quero na área de trabalho:

|        |           |
|        |  Flower   |
|  Tree  |___________|
|        |           |
|        |   Bee     |
|        |           |

E no celular:

| Flower |
|________| 
|        |
|  Tree  |
|________| 
|        |
|  Bee   |

Portanto, se eu pudesse combinar Flower e Bee em uma única coluna flexível na área de trabalho, seria bom.

Eu provavelmente poderia usar um flutuador, mas já estou usando uma grade flexível.

Esta é uma página com conteúdo variável. Gostaria que o conteúdo aumentasse verticalmente e que uma barra de rolagem vertical apareça na página, se for além da janela de exibição.

Não há altura definida em nenhuma das caixas.

Já estou usando o Flexbox para a grade e não gostaria de adicionar nenhum invólucro.