如何防止ChartJs挤压Flexbox绝对定位面板？

问题根源 #

左侧面板使用绝对定位脱离了正常文档流，当右侧Chart.js触发重绘（如鼠标悬停）时，浏览器重新计算容器宽度会忽略左侧面板，导致右侧占满整个空间并挤压左侧至宽度为0。

实现方案：用Flexbox替代绝对定位 #

通过Flexbox布局让左侧面板自适应内容宽度、右侧面板占据剩余空间，同时保留左侧内部滚动的功能，完全无需硬编码尺寸。

1. 页面结构 #

<div class="layout">
  <!-- 顶部工具栏 -->
  <div class="toolbar">工具栏内容</div>
  <!-- 下方内容容器 -->
  <div class="content-box">
    <!-- 左侧面板 -->
    <div class="left-panel">
      <div class="scrollable-content">
        <!-- 这里放置左侧长内容，宽度由内容自动撑开 -->
      </div>
    </div>
    <!-- 右侧Chart容器 -->
    <div class="right-panel">
      <canvas id="chartCanvas"></canvas>
    </div>
  </div>
</div>

2. CSS样式 #

/* 整体布局容器 */
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满视口高度 */
}

/* 工具栏 */
.toolbar {
  height: 56px;
  background-color: #f0f0f0;
  padding: 0 16px;
  display: flex;
  align-items: center;
}

/* 下方内容容器，用flex分配左右面板空间 */
.content-box {
  flex: 1;
  display: flex;
  overflow: hidden; /* 避免整体滚动 */
}

/* 左侧面板：禁止压缩，内部滚动 */
.left-panel {
  flex-shrink: 0; /* 关键：防止被右侧挤压 */
  overflow-y: auto; /* 实现内部内容滚动 */
  background-color: #f5f5f5;
  padding: 16px;
}

/* 右侧面板：占据剩余全部空间 */
.right-panel {
  flex: 1;
  padding: 16px;
  overflow: hidden; /* 防止Chart溢出容器 */
}

3. Chart.js配置优化 #

初始化Chart时添加maintainAspectRatio: false，确保图表自适应父容器尺寸，避免重绘时触发布局异常：

const ctx = document.getElementById('chartCanvas').getContext('2d');
new Chart(ctx, {
  type: 'bar', // 或其他图表类型
  data: { /* 你的数据 */ },
  options: {
    responsive: true,
    maintainAspectRatio: false, // 让图表自适应容器大小
    // 其他配置项
  }
});

核心逻辑 #

• flex-shrink: 0确保左侧面板宽度由自身内容决定，不会被压缩；flex: 1让右侧面板自动填充剩余空间，彻底摆脱硬编码尺寸的限制。
• 用overflow-y: auto替代绝对定位实现内部滚动，既保留滚动功能，又让左侧面板处于正常文档流中，浏览器能始终正确计算布局，解决Chart重绘挤压的问题。

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