I have a canvas element inside a container and I want to prevent the canvas from extending beyond the left side of its container. Despite trying various solutions, I have not been successful. The legend is hidden within the container but when the chart reaches the right border, it pushes the chart outside the container.
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>
Image (blue = child, red = parent)
https://i.sstatic.net/Qtqv9.png
UPDATE 1
If I continue collapsing the browser's width, my chart moves all the way to the left side of the browser window.