flex布局之flex-basis采坑
场景：
容器设置为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的情况
