Angular项目flex两栏布局下如何调整图表尺寸实现左右栏比例协调

该需求可以完全实现，不需要修改原有flex布局的核心属性，仅需要补全遗漏的样式规则、修复语法问题即可，调整步骤如下：

问题根因梳理 #

• 你写的行内样式height:100; width:100;缺少长度单位（px/%/vw等），属于非法CSS属性，浏览器会直接忽略该规则
• Angular自定义组件app-pie默认是行内元素，行内元素设置宽高属性不生效
• flex布局子项默认min-width: auto，如果内容宽度超过容器，会撑大父级，导致两栏无法保持1:1的等分比例
• 若使用第三方图表库，若在DOM未完成渲染时初始化图表，会读取不到正确的容器尺寸，导致图表使用默认尺寸渲染

修改后的代码示例 #

调整后CSS #

.container {
    display: flex;
    /* 可选：添加两栏间距 */
    gap: 16px;
}

#col-1 {
    background-color: rgb(226, 226, 122);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

#col-2 {
    background-color: rgb(219, 176, 95);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* 让自定义饼图组件支持宽高设置 */
app-pie {
    display: block;
    width: 100%;
    height: 100%;
}

调整后HTML #

<section class="container">
    <div id="col-1">
        <h2>健康饮食从采购开始</h2>
        <p>在采购阶段你就可以为健康饮食做很多准备——从采购量开始把控...</p>
    </div>
    <div id="col-2">
        <h2>图表展示</h2>
        <p>图表说明</p>
        <!-- 补全尺寸单位，此处高度可根据需求调整为固定px或百分比 -->
        <div style="height:300px; width:100%; border: 1px solid red;">
            <app-pie></app-pie>
        </div>
    </div>
</section>

<router-outlet></router-outlet>

额外注意事项 #

如果使用第三方图表库（如ECharts、Chart.js等），请将图表初始化逻辑写在组件的ngAfterViewInit生命周期钩子中，确保DOM渲染完成后再读取容器尺寸初始化图表，避免尺寸计算异常。

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