使用column-count时Canvas拉伸问题的精准解决方案咨询

我用Chart.js开发页面，需要将两个饼图和一个柱状图展示在同一行，且柱状图尺寸大于单个饼图。为让两个饼图适配单列布局，我采用了column-count属性，现有CSS与HTML代码如下。

目前给.pie类设置max-height:93%能接近预期效果，但这个硬编码值不够精准，窗口缩小时布局会出现不一致。我尝试过多种flex设置，但希望保持项目CSS设置的一致性，因此寻求无需硬编码值的精准解决方案。未设置max-height时的显示效果：两个饼图纵向被过度拉长，高度远超过右侧柱状图，整体布局失衡。

现有CSS代码 #

.container {
    display: flex;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30px;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    align-self: stretch;
    margin-right: 10px;
    margin-left: 10px;
}

.container div {
    flex: 1;
}

canvas {
    max-width: 100%;
    display: flex;
}


.pie {
    column-count: 2;
    max-height: 93%;
}

现有HTML代码 #

<div class="container">
    <div class="row">
        <div class="pie">
            <canvas baseChart [data]="pieFeeChartData" [type]="pieChartType"
                [options]="pieFeeChartOptions">
            </canvas>
            <canvas baseChart [data]="pieFooChartData" [type]="pieChartType"
                [options]="pieFooChartOptions">
            </canvas>
        </div>
        <div class="column">
            <canvas baseChart [data]="barBlahChartData"
                [options]="barBlahChartOptions" [type]="barChartType">
            </canvas>
        </div>
    </div>
</div>

解决方案 #

放弃column-count，改用flex布局实现左侧两个饼图的纵向排列，同时通过flex比例控制左右容器宽度，无需硬编码高度即可实现精准布局：

修改后的CSS代码 #

.container {
    display: flex;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30px;
    gap: 20px; /* 替代margin，统一控制左右容器间距 */
}

/* 左侧饼图容器：纵向排列，宽度占比1 */
.pie-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px; /* 两个饼图之间的间距 */
}

.column {
    display: flex;
    flex-direction: column;
    flex: 2; /* 柱状图容器宽度为左侧的2倍，可按需调整比例 */
    align-self: stretch;
}

canvas {
    max-width: 100%;
    height: auto !important; /* 强制Chart.js画布自适应容器高度，避免拉伸变形 */
}

修改后的HTML代码 #

<div class="container">
    <div class="row">
        <div class="pie-container">
            <canvas baseChart [data]="pieFeeChartData" [type]="pieChartType"
                [options]="pieFeeChartOptions">
            </canvas>
            <canvas baseChart [data]="pieFooChartData" [type]="pieChartType"
                [options]="pieFooChartOptions">
            </canvas>
        </div>
        <div class="column">
            <canvas baseChart [data]="barBlahChartData"
                [options]="barBlahChartOptions" [type]="barChartType">
            </canvas>
        </div>
    </div>
</div>

核心优化点 #

1. 用flex纵向布局替代column-count，让两个饼图自动均分左侧容器高度，避免高度拉伸问题
2. 通过flex属性设置左右容器宽度比例（如1:2），满足柱状图尺寸更大的需求，且比例可灵活调整
3. 给画布添加height: auto !important，确保Chart.js自适应容器尺寸，防止图表变形
4. 采用gap属性控制间距，替代零散的margin设置，保持布局风格统一

调整后，窗口缩放时布局会自动适配，无需硬编码高度值，同时与项目现有flex布局规范保持一致。

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