<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>开发中常用到的flex布局</title></head><body> <div class="container"> <div class="left"> <div class="left__top"> <div class="list1">上</div> </div> <div class="left__bottom"> <div class="list2">下</div> </div> </div> <div class="right"> 右 </div> </div> <style> body { width: 100vw; height: 100vh; margin: 0; padding: 0; overflow: hidden; font-size: 40px; text-align: center; color: #ffffff; } .container { width: 100%; height: 100%; overflow: hidden; display: flex; padding: 20px; box-sizing: border-box; gap: 20px; } .left { flex: 1; height: 100%; overflow: hidden; gap: 20px; display: flex; flex-direction: column; } .left__top { height: 300px; } .left__bottom { flex: 1; overflow: scroll; } .left__top, .left__bottom { overflow: auto; } .left__top::-webkit-scrollbar, .left__bottom::-webkit-scrollbar { background: transparent; width: 5px; height: 5px; } .left__top::-webkit-scrollbar-thumb, .left__bottom::-webkit-scrollbar-thumb { background: #d5d5d5; border-radius: 5px; } .right { width: 500px; height: 100%; flex-shrink: 0; background-color: #70505b; } .list1 { height: 600px; background-color: #9b545a; } .list2 { height: 800px; background-color: #a87e86; } </style></body></html>
实现的效果：
