场景：
容器设置为display: flex，容器里的子项目部分设置 flex: auto，子项目的宽高自适应正常，但如果再往子项目里嵌套一个（如：div），并设置高度（如：height: 100%），发现该元素高度不符合预期。
源码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html,body{
margin: 0px;
padding: 0px;
height: 99%;
}
div{
padding: 5px 10px;
border: 1px solid silver;
}
.container {
height: 90%;
}
.flex{
display: flex;
flex-direction: column;
}
.item {
flex: 1 1 auto;
overflow: auto;
}
</style>
</head>
<body>
<div class="flex container">
<div class="">
<h3>头部信息 - 未设置高度信息</h3>
</div>
<hr>
<div class="item">
flex: auto时高度自适应情况
<div class="container">
内部嵌套要求自适应高度（百分比）的div
</div>
</div>
</div>
</body>
</html>
不符预期图：
预期效果图：
为达到预期其实只对样式略微做了调整：
.item {
flex: 1 1 100%;
overflow: auto;
}
flex是一种简写，最后一个值其实就是对应flex-basis的设置，如果同时设置flex-basis和height，那么height属性会被覆盖，也就是说flex-basis的优先级比height高。有一点需要注意，如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。
如果这是设置后，依然出现height： 100%无效，可以查看父级是有flex-basis：auto的情况