想使用flex制作这种可自适应的布局（用在手机页面）：
我仿照着写了，效果如下：
对应的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style>
body,div{margin:auto;padding:0px;position:relative;}
.wfr_con{border:5px solid red;max-width:640px;width:100%;min-height:100px;max-height:300px;margin-top:20px;display:flex;display:-webkit-flex;justify-content:flex-start;-webkit-justify-content:flex-start;flex-flow:row wrap;-webkit-flex-flow:row wrap;align-items:stretch;-webkit-align-items:stretch;box-sizing:border-box;zoom:1;}
.wfr_con>div{margin:0px;width:0px;height:100%;flex:1 1 auto;-webkit-flex:1 1 auto;}
.wfr_left{}
.wfr_left a{width:100%;height:100%;display:inline-block;}
.wfr_left a img{width:100%;height:100%;}
.flex_two{border:3px solid green;height:100%;display:flex;flex-flow:column wrap !important;-webkit-flex-flow:column wrap !important;justify-content:flex-start;-webkit-justify-content:flex-start;align-items:stretch;-webkit-align-items:stretch;}
.flex_two a{width:100%;height:50%;flex:1 1 auto;}
.flex_two a img{width:100%;height:100%;}
</style>
<div class='wfr_con'>
<div class='wfr_left'>
<a href='javascript:void(0);'><img src='http://img1.gamersky.com/image2016/05/20160526_ll_136_6/gamersky_03small_06_20165261143C4D.jpg' /></a>
</div>
<div class='wfr_right'>
<div class='flex_two'>
<a href='javascript:void(0);'><img src='http://img1.gamersky.com/image2016/05/20160526_ll_136_6/gamersky_01small_02_20165261143DDB.jpg' /></a>
<a href='javascript:void(0);'><img src='http://img1.gamersky.com/image2016/05/20160526_ll_136_6/gamersky_02small_04_20165261143563.jpg' /></a>
</div>
</div>
</div>
</body>
</html>
重点出现这种现象的原因，我没有在最外层容器元素上设置固定的高度(使用的是：min-height,max-height)，才导致出现这种现象。
我想要知道为什么设置min-height,max-height 后，子元素为什么就无法继承父元素的高度了呢？？
然后就是，怎么解决这个问题，实现我想要的效果（第一张图显示的布局）？？