CSS flex, cách hiển thị một mục trên dòng đầu tiên và hai mục trên dòng tiếp theo

Đây là một câu hỏi khá đơn giản, tôi đoán vậy, nhưng tôi không thể lấy 3 mục trong vùng chứa linh hoạt để hiển thị thành 2 hàng, một ở hàng đầu tiên và 2 mục còn lại ở hàng thứ hai. Đây là CSS cho vùng chứa linh hoạt. Nó hiển thị 3 mục trên một dòng, rõ ràng :)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

Nếu flex-wrapđược đặt thành wrap, thì 3 mục sẽ được hiển thị trong một cột. Tôi nghĩ rằng cài đặt bọc là cần thiết để hiển thị các mục chứa trên một số dòng. Tôi đã thử CSS này cho mục vùng chứa đầu tiên, dự định để nó chiếm toàn bộ hàng đầu tiên, nhưng nó không hoạt động

div.intro_item_1 {
  flex-grow: 3;
}

Tôi đã làm theo hướng dẫn trong "CSS-Tricks" nhưng tôi thực sự không chắc nên sử dụng tổ hợp lệnh nào. Mọi sự giúp đỡ sẽ rất được hoan nghênh vì tôi đang phân vân vì điều này.

Bạn có thể làm điều gì đó như sau:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}

<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

Đây là bản demo: http://jsfiddle.net/73574emn/1/

Mô hình này dựa vào dòng bọc sau khi một "hàng" đã đầy. Vì chúng tôi đặt mục đầu tiên flex-basislà 100% nên nó sẽ lấp đầy hoàn toàn hàng đầu tiên. Đặc biệt chú ý đếnflex-wrap: wrap;

Câu trả lời mà Nico O đưa ra là đúng. Tuy nhiên, điều này không nhận được kết quả mong muốn trên Internet Explorer 10 đến 11 và Firefox.

Đối với IE, tôi thấy rằng thay đổi

.flex > div
{
   flex: 1 0 50%;
}

đến

.flex > div
{
   flex: 1 0 45%;
}

dường như làm các thủ thuật. Đừng hỏi tôi tại sao, tôi chưa đi sâu hơn vào vấn đề này nhưng nó có thể liên quan đến cách IE hiển thị hộp viền hoặc thứ gì đó.

Trong trường hợp của Firefox, tôi đã giải quyết bằng cách thêm

display: inline-block;

đến các mặt hàng.