Chart.js响应式异常：父容器max-width 800px时图表不缩放问题

我将一个Chart.js图表嵌套在两层div容器中，外层div设置了max-width:800px，内层div设置width:100%，canvas本身未添加任何样式。但图表并未随外层容器的max-width限制进行缩放，而是直接忽略该设置，请问这是什么原因？

代码示例 #

CSS代码 #

*{
    padding: 0;
    margin: 0;
}

body{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}
.bodycontainer{
    border: 2px dashed red;
    height: 200vh;
    max-width: 800px;
    margin: auto;
    position: relative;
}
#canvasContainer{
    margin-top: 300px;
    border: 2px dashed blue;
    position: relative;
    width: 100%;
    height: 400px;
}

HTML & JavaScript代码 #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div class="bodycontainer">
        <div id="canvasContainer">
            <canvas id="myChart"></canvas>
        </div>
    </div>

    <script>
        var data = {
            labels: ["Aug", "Sep", "Okt", "Nov", "Dez", "Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug"],
            datasets: [
                {
                    label: "Desktop",
                    data: [38.53, 39.27, 39.72, 39, 37.71, 39.41, 38.6, 40.8, 44.4, 47.41, 42.2, 42.4, 43.72],
                    backgroundColor: 'rgba(115, 157, 255, 1)',
                    borderColor: 'rgba(115, 157, 255, 1)',
                    borderWidth: 1,
                },
                {
                    label: "Mobil",
                    data: [59.25, 58.64, 58.27, 59.02, 60.29, 58.52, 59.36, 57.18, 53.61, 50.71, 55.87, 55.67, 54.41],
                    backgroundColor: 'rgba(255, 115, 115, 1)',
                    borderColor: 'rgba(255, 115, 115, 1)',
                    borderWidth: 1,
                },
                {
                    label: "Tablet",
                    data: [2.22, 2.09, 2.02, 1.98, 2, 2.07, 2.04, 2.02, 1.99, 1.88, 1.92, 1.93, 1.87],
                    backgroundColor: 'rgba(147, 255, 115, 1)',
                    borderColor: 'rgba(147, 255, 115, 1)',
                    borderWidth: 1,
                }
            ]
        };
        var options = {
            maintainAspectRatio: false,
            responsive: true,
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Months',
                    },
                },
                y: {
                    title: {
                        display: true,
                        text: 'Percent',
                    },
                    min: 0,
                    max: 100,
                    ticks: {
                        stepSize: 10,
                    },
                },
            },
        };
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options,
        });
    </script>

</body>

原因分析 #

问题出在外层容器.bodycontainer的样式设置上：

• 仅设置max-width:800px但未指定width属性。在Flex布局（body为flex容器）中，未设置width的flex子元素会默认拉伸以占据容器的可用水平空间，导致max-width限制失效，外层容器宽度直接撑满视口（100vw）。
• 内层容器#canvasContainer设置width:100%，会继承外层容器的实际宽度（100vw），Chart.js的responsive: true会基于这个宽度渲染图表，自然忽略了原本期望的800px限制。

解决方案 #

给外层容器.bodycontainer添加width: 100%属性，让它先尝试占满父容器宽度，再通过max-width:800px限制最大宽度：

.bodycontainer{
    border: 2px dashed red;
    height: 200vh;
    max-width: 800px;
    width: 100%; /* 新增这行 */
    margin: auto;
    position: relative;
}

修改后效果：

• 视口宽度大于800px时，外层容器宽度被限制在800px，内层容器和图表随之缩放到800px宽度。
• 视口宽度小于800px时，外层容器自适应视口宽度，图表也会响应式缩放。

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