Apesar do meu Google, eu encontrei alguns exemplos sobre como implementar flexboxes de múltiplas linhas. Nenhum dos códigos que obtive de exemplos funcionou. Eu tenho três elementos dentro de um flexbox e quero que o primeiro fique no topo e o segundo e o terceiro na linha de baixo.

<div class="flexbox">
  <div id="element1">element 1</div>
  <div id="element2">element 2</div>
  <div id="element3">element 3</div>
</div>

Eu tentei usar essas propriedades:

.flexbox {
  width: 300px;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  box-lines: multiple;
  flex-wrap: wrap;
}

#element1 {
  width: 100%;
}

e dando a ela uma largura definida, mas ela ainda não será quebrada, mesmo que o primeiro elemento tenha uma largura de 100%. Estou faltando alguns prefixos de fornecedores ou a minha sintaxe está errada?