flex嵌套布局高度自适应加滚动条

最新推荐文章于 2024-08-18 14:38:32 发布

fz00766

最新推荐文章于 2024-08-18 14:38:32 发布

阅读量5.5k

点赞数 5

本文链接：https://blog.csdn.net/fz00766/article/details/81198584

版权

<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 很重要