ApexChart在含columns:2的容器中无法正常显示的问题

问题描述 #

• 当ApexChart渲染在带有 columns: 2; 属性的容器中时，图表出现显示异常（如布局错乱、元素截断）
• 移除 columns: 2; 属性后，图表可正常渲染
• 需要纯CSS方案实现两列布局，适配内容/高度动态变化的场景，不依赖JavaScript瀑布流实现

原因分析 #

CSS columns 是基于文本流的多列布局，会将容器内的内容按高度拆分到不同列中。而ApexChart内部大量使用绝对定位元素（坐标轴、数据点等），这些元素的定位计算依赖父容器的完整尺寸，columns 的拆分机制会破坏尺寸计算逻辑，导致图表渲染异常。

纯CSS解决方案 #

方案1：Flexbox 弹性布局 #

用Flexbox替代columns实现两列布局，保证每个图表容器作为独立块完整渲染：

.chart-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 可选，设置列间距 */
}

.chart-wrapper {
  flex: 1 1 calc(50% - 0.5rem); /* 减去gap的一半，确保两列布局 */
  min-width: 300px; /* 可选，设置最小宽度，适配小屏幕自动转为单列 */
}

Flexbox会自动根据内容高度调整布局，不会拆分单个图表容器的内部结构，完美兼容ApexChart的渲染逻辑。

方案2：CSS Grid 网格布局 #

用Grid布局实现自适应两列，布局逻辑更直观：

.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

auto-fit 配合 minmax 会根据屏幕宽度自动调整列数，小屏幕下自动转为单列；每个图表容器占据独立网格单元，避免了columns的流式拆分问题，同时支持内容高度动态变化。

内容的提问来源于stack exchange，提问作者levi.hrb