生成一个竖直放置的div，宽度是350px，上面是标题固定高度50px，下面是自适应高度的div，且有滚动条

复制代码

<!-- 我要生成一个竖直放置的div，宽度是350px，上面是标题固定高度50px，下面是自适应高度的div，且有滚动条。 -->

<style>
    html,body{
        /* height:100vh; */
        margin:10px; padding:10px;
    }
</style>


<div style="display:flex;  flex-direction:column; width:350px; height:100%;  border:1px solid rgb(70, 50, 50); ">
    <div style="width:100%; height:50px; line-height:50px;  text-align: center;  background-color:rgba(141, 179, 244, 0.864);">部件列表</div>
    <div style="flex:1;  width:100%; overflow: auto;   border:0px solid lime; background-color:rgb(243, 247, 243);">
        <div style="padding:10px; line-height:50px;">
     
    - 外盒+活动板内盒+上盖+盒身面纸<br>
    - 内盖+内盖底贴面纸<br>
    - 内盒内托+内盖底贴面纸<br>
    - 活动板内盒连接+内盖底贴面纸<br>
    - 外盒内裱+活动板内盒内裱+弯位连接面纸<br>
    - 内盒内围+U形内托面纸<br>
    - 内盖底贴+内托U形内托面纸<br>
    - 外盒1350g单面高光双灰<br>
    - 活动板内盒1350g单面高光双灰<br>
    - 活动板内盒两侧1350g单面高光双灰<br>
    - 上盖1950g单面高光双灰<br>
    - 盒身1950g单面高光双灰<br>
    - 内盖1950g单面高光双灰<br>
    - 内围1200g双灰<br>
    - 内托1200g双灰<br>
    - 内托U形底贴<br>
    - 手袋面纸<br>
    - 手袋袋口条<br>
    - 手袋底卡<br>
        </div>
    </div>
</div>

改进版：

复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      /* height: 100vh;   */
      margin: 0px;
      padding: 0px;
   
      /* box-sizing: border-box; 包含padding在高度内 */
    }
    body * {
      box-sizing: inherit; /* 统一盒模型 */
    }
    li{
        padding: 10px;
        cursor: pointer;
    }
    .div_left_bar{
        display:flex; 
        flex-direction:column;
        width:350px; height:100vh;
        border:1px solid rgb(12, 12, 221);
        box-sizing: border-box;
    }

    #div_main{
        display: flex;
        height:100vh;
        gap:10px;
        /* margin:10px; */
        /* padding:10px; */
    }

    #div_right_content{
        flex:1;
        padding:10px;
        background:#f4fff4;
        border:1px solid green;
    }

    /* 单据滚动条 */
        #div_auto_height::-webkit-scrollbar{
        width: 5px;
    }

    #div_auto_height::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 0;
        /* background: rgba(0, 0, 0, 0.1); */
    }

    #div_auto_height::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.15);
    }

    #div_auto_height{
        flex:1; 
        min-height:0; 
        overflow:auto;
        background-color:rgb(243,247,243);
    }
    
    #div_title{
        height:50px; 
        line-height:50px; 
        text-align:center; 
        background-color:rgba(141,179,244,0.864);
    }
  </style>
</head>
<body>
    <div id="div_main">
        <div class="div_left_bar"  >
            <!-- 固定高度标题 -->
            <div id="div_title" >
            部件列表
            </div>
            
            <!-- 自适应高度+滚动区域 -->
            <div id="div_auto_height">
            <div style="padding:10px;">
                <ul style="margin:0; padding-left:20px;"> <!-- 关键2：限制UL高度触发溢出 -->
            <li>  - 外盒+活动板内盒+上盖+盒身面纸</li> <li>
            - 内盖+内盖底贴面纸</li> <li>
            - 内盒内托+内盖底贴面纸</li> <li>
            - 活动板内盒连接+内盖底贴面纸</li> <li>
            - 外盒内裱+活动板内盒内裱+弯位连接面纸</li> <li>
            - 内盒内围+U形内托面纸</li> <li>
            - 内盖底贴+内托U形内托面纸</li> <li>
            - 外盒1350g单面高光双灰</li> <li>
            - 活动板内盒1350g单面高光双灰</li> <li>
            - 活动板内盒两侧1350g单面高光双灰</li> <li>
            - 上盖1950g单面高光双灰</li> <li>
            - 盒身1950g单面高光双灰</li> <li>
            - 内盖1950g单面高光双灰</li> <li>
            - 内围1200g双灰</li> <li>
            - 内托1200g双灰</li> <li>
            - 内托U形底贴</li> <li>
            - 手袋面纸</li> <li>
            - 手袋袋口条</li> <li>
            - 手袋底卡</li> 
                <!-- 其他15项列表内容保持不变 -->
                </ul>
            </div>
            </div>
        </div>

         <div id="div_right_content"  >
                我是详情
         </div>

    </div>

    <script>
        // 左侧列表点击事件

        var listItems = document.querySelectorAll('#div_auto_height li');
        var div_right_content = document.querySelector ('#div_right_content');
        listItems.forEach(function (item) {
            item.addEventListener('click', function () {
                // 这里可以添加点击事件的处理逻辑，例如显示详情等
                console.log("点击了：" + item.textContent);

                div_right_content.innerHTML = item.textContent;
            });
        });
    </script>
</body>
</html>

注意height:100vh和100%是不一样的。