如何在侧边栏与表格容器之间创建可滚动div，解决侧边栏隐藏问题

问题根因 #

• 侧边栏设置了margin-left: -625px，直接被偏移到可视区域左侧外，所以显示不出来
• 侧边栏和表格容器分属不同的父级节点，没有放在同一个可滚动容器内，无法实现同步滚动
• CSS属性混用冲突：同时给sidebar设置了float和flex属性，二者布局逻辑不兼容，且父容器没有设置flex布局，flex属性完全不生效
• 侧边栏高度写死1000px远高于实际内容高度，会出现无效滚动区域

修正后实现代码 #

CSS部分 #

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

header,
footer {
  background: #ccc;
  height: 20%;
}

/* 外层统一滚动容器，包裹侧边栏和表格 */
.scroll-wrapper {
  height: 60%;
  display: flex;
  overflow-x: auto; /* 表格列多的时候横向滚动 */
  overflow-y: auto; /* 内容过高的时候纵向滚动 */
}
 
.sidebar{
  width: 30%;
  flex-shrink: 0; /* 避免侧边栏被表格挤压缩小 */
  background-color: lightblue;
}

/* 表格容器样式 */
.container-l {
  flex-grow: 1; /* 占满剩余宽度 */
  min-width: max-content; /* 保证表格不会折行，24列能完整显示 */
}

HTML部分 #

<body>
  <!-- 统一滚动容器 -->
  <div class="scroll-wrapper">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="row">
        <div class="row" id="row_id">
          side bar content 1<br>
          side bar content 2<br>
          side bar content 3<br>
          side bar content 4<br>
          side bar content 5<br>
          side bar content 6<br>
        </div>
      </div> 
    </div>
    <!-- 表格区域 -->
    <div class='container-l'>
      <div id='container-table'>
        <table class="table" border="1"> 
          <thead>
              <tr>
                <th>Region</th>
                <th>Area</th>
                <th>Country</th>
                <!-- 剩余21列自行补充 -->
             </tr>
            </thead>
          <tbody>
            <tr>
              <td>US</td>
              <td>North America</td>
              <td>US</td>
             </tr>  
             <tr>
              <td>US</td>
              <td>North America</td>
              <td>US</td>
            </tr>
            <!-- 表格行自行补充 -->
          </tbody>
         </table>
      </div>
     </div>
  </div>
</body>

内容的提问来源于stack exchange，提问作者imran_44