Flex to wrap with fixed size - css

Question

The title doesn't describe my problem but did'nt find a better one.
So, I have one div containing 3 divs, I wan't two columns with div A in the first one and div B and C in the second, on large screens and one only column on small screens. I could use #media but I think flex can do it without.
This is what I tried:
<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;
}
Demo
I fixed the height to force the content to go to 2 columns but then it never goes to onel colum.

Answer 1

Just remove the last css element:
https://jsfiddle.net/j2brc3t3/1/
Live example:
#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>

Answer 2

#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>
I found a near solution:
Demo
It answer my question but show a new issue with margins, I need no margin around the container, just 5px between the inner divs, if someone has the perfect solution...