Im building a website where a graph is drawn on a canvas within a div that can be resized. Whenever i resize the div the canvas also resizes to fit the whole width of the div, however this leaves alot of empty space above and below which is not great looking, id rather the canvas fit the whole height then clip beyond the end of the div meaning that the user could scale the graph to their liking without the empty space above and below.

Is there a way to force the canvas to scale with height?

Here is the HTML elements that make up the graph:

<div class='graphHolder' id='graphHolder1'>
    <div class='graph' id='graph1'>

        <canvas class='chart' id='chart' height='100%'></canvas>
                
    </div>
</div>

And here is the CSS for those elements:

.graphHolder {
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50px;
    left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    resize: both;
    border: 1px solid #d62828;
    border-radius: 10px;
}

.graph{
    width: -moz-calc(100% - 5px);
    width: -webkit-calc(100% - 5px);
    width: calc(100% - 5px);
    height: -moz-calc(100% - 5px);
    height: -webkit-calc(100% - 5px);
    height: calc(100% - 5px);
    background: ;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    background: white;
    border: ;
}