flex巢狀佈局高度自適應加滾動條
阿新 • • 發佈：2019-01-08
<div class="colwarp" style="display: flex; flex-direction: column; height: 100%; background-color: #bbf;justify-content:space-between; overflow: hidden;"> <div class="col-1" style="background-color: #f00;"> <div style="height: 200px"></div> </div> <div class="col-2" style="background-color: #ff0;flex-grow:1; height: 0"> <div style="overflow: hidden; height: 100%"> <div class="colwarp" style="display: flex; flex-direction: column; height: 100%; background-color: #bbf;justify-content:space-between;"> <div class="col-1" style="background-color: #f70;"> <div style="height: 100px"> </div> </div> <div class="col-2" style="background-color: #3f0;flex-grow:1; height: 0 "> <div style="background-color: #898989;overflow: auto; height: 100%; "> 11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br>11<br> </div> </div> </div> </div> </div> </div>
height:0 很重要