html - 左侧离开父母的孩子

Question

我有canvas一个容器内的项目。我预计canvas无法延伸到左侧的容器之外。我在这里尝试了几种解决方案，但还没有运气。我的图例将隐藏在容器内，但是一旦容器到达图表的右边界，容器就会开始将图表推到容器外部的左侧。

CSS：

.chart-container{
    display: flex;
    flex-direction: row;
    border: 1px solid red;
    justify-content: center;
}
#totalChartLegend, #pdChartLegend {
    list-style-type: square;
    list-style-position: inside;
    cursor: pointer;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #666;
    overflow-y: auto;
    overflow-x: hidden;
    height: 280px;
    width: 140px;


    border: 1px solid green;
    margin-top: 40px;
    text-align: left;
    white-space: nowrap;
}
#totalChartLegend li, #pdChartLegend li{
  display: block;

}
#totalChartLegend li.hidden, #pdChartLegend li.hidden{
  color: rgba(102, 102, 102, .4);
}
#totalChartLegend li span, #pdChartLegend li span{
  display: inline-block;
  height: 15px;
  width: 35px;
  margin-right: 10px;

}
#totalChart, #pdChart{
    border: 1px solid blue;

}

HTML

<section id="totalChartContainer" class="chart-container">
    <canvas id="totalChart" width="900" height="400"></canvas>
    <span id="totalChartLegend"></span>
</section>

图片（蓝色 = 孩子，红色 = 父母）

编辑 1

如果我继续折叠浏览器的宽度，我的图表将一直到浏览器的左侧。

标签： htmlcsscanvas

Answer 1

将父 CSS 更改为

.chart-container{
    display: flex;
    flex-direction: row;
    border: 1px solid red;
    justify-content: center;
    min-width:900px;
}