疑惑现象：
弹性布局父元素的height=所有子元素的元素高度，而子元素又能继承父元素高度（height:100%）。
可能过程：
先使用子元素总高度撑起父元素高度，子元素再继承父元素高度。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="border: 2px solid black;box-sizing: border-box;">
<div style="border:2px solid red;display: flex;">
<div style="height: auto;">
<div style="height: 100%;border: 5px solid yellow;box-sizing: border-box;">
<h1>1</h1>
<input>
<input>
<input>
<input>
</div>
<div style="height: 100%;border: 5px solid green;box-sizing: border-box;">
<h1>2</h1>
<input>
<input>
<input>
<input>
</div>
</div>
</div>
</body>
</html>
博文引用-启发：
由多次测试我猜测是首次渲染之后，父元素未设置高度，子元素即使设置height：100%；
获取不到父元素高度，高度由子元素的内容决定。
而dispaly:flex;弹性布局会动态计算元素的高度，在确定最大的元素高度之后，相当于父元素高度确定，再由于height: auto;的存在由浏览器计算出其他子元素的高度，最终使得各个子元素高度统一。
其他：
有明白具体过程的嘛？欢迎留言指教。
相关参考：
CSS height 及 flex布局一则
