查遍各大資源無任何flex嵌套布局的例子，經過自己折騰完成了項目中的高度自適應需求（更多應用於前端組件）
效果圖：
html代碼：（關鍵地方已經用顏色特別標識 ^_^）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>flex 嵌套 之 高度自適應</title> <style media="screen"> body, html { height: 90%; } .flex { display: -webkit-flex; display: flex; flex-direction: column; } .item { flex: auto; } .overflow { overflow: auto; } .outer { height: 70%; border: 1px solid silver; } .contener { background: pink; border: 1px solid silver; } .contener>div{ padding: 5px; } </style> </head> <body> <h1>flex 嵌套布局</h1> <div class="flex outer"> <div style="background-color: silver; padding: 10px;">外容器 自適應內容的區域 ... ...</div> <div class="flex item overflow" style="padding: 15px;"> <!-- 嵌套的item加flex樣式 及 overflow: auto屬性 --> <div class="flex contener overflow"> <!-- overflow: auto 高度自適應必須 --> <div style="background-color: yellow;"> <h3>內容器 - 頭部信息</h3> </div> <div class="item overflow"> <!-- overflow: auto 高度自適應必須 --> 內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br> 內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br> 內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br> </div> <div style="background-color: yellow;"> <h3>內容器 - 尾部信息</h3> </div> </div> </div> </div> </body> </html>
總結：
flex布局嵌套的關鍵，就是對item進行容器定位，賦予flex特性。
flex知識學習小游戲： https://flexboxfroggy.com/