Flex, чтобы обернуть с фиксированным размером

Question

Название не описывает мою проблему, но не нашел лучшей.Итак, у меня есть один div, содержащий 3 div, я хочу два столбца с div A в первом и div B и C во втором на больших экранах и один единственный столбец на маленьких экранах.Я мог бы использовать @media, но я думаю, что Flex может сделать это без.

Вот что я пробовал:

<div id="container">

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

</div>

#container
{
  border:1px solid #aaa;
  height:300px;
  width:500px;
  max-width:100%;
  display:flex;
  flex-flow:column;
  flex-wrap:wrap;  
}
#container > div
{
  border:1px solid #aaa;
  margin:2px;
  flex-grow:1;
  min-width:200px;
  height:10px;
}
#container > div:first-of-type
{
  height:300px;
  flex-grow:1;
}

Демо

Я исправилвысота, при которой содержимое переходит в 2 столбца, но затем оно никогда не переходит в один столбец.

Answer 1

#container {
  border: 1px solid #aaa;
  width: 600px;
  max-width: 100%;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
}

#in1 {
  background: #a1d;
  margin: 5px;
  height: 200px;
  flex-grow: 1;
  min-width: 200px;
}

#in2 {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
  min-width: 200px;
}

#in2>div {
  background: #e25;
  flex-grow: 1;
}


/*
#in2 div:first-child {
  margin-bottom: 5px;
}
*/

<div id="container">

  <div id="in1">div1</div>
  <div id="in2">
    <div>div2</div>
    <div>div3</div>
  </div>

</div>

Я нашел близкое решение:

Демо Это ответ на мой вопрос, но покажу новую проблему с полями, яне нужно никакого поля вокруг контейнера, просто 5px между внутренними элементами, если у кого-то есть идеальное решение ...

Answer 2

Просто удалите последний элемент CSS:

https://jsfiddle.net/j2brc3t3/1/

Живой пример:

#container
{
  border:1px solid #aaa;
  height:300px;
  width:500px;
  max-width:100%;
  display:flex;
  flex-flow:column;
  flex-wrap:wrap;  
}
#container > div
{
  border:1px solid #aaa;
  margin:2px;
  flex-grow:1;
  min-width:200px;
  height:10px;
}

<div id="container">

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

</div>