Estoy creando un sitio web donde se dibuja un gráfico en un lienzo dentro de un div que se puede cambiar de tamaño. Cada vez que cambio el tamaño del div, el lienzo también cambia de tamaño para adaptarse a todo el ancho del div, sin embargo, esto deja mucho espacio vacío arriba y abajo que no se ve muy bien, id más bien, el lienzo se ajusta a toda la altura y luego se recorta más allá del final del div lo que significa que el usuario puede escalar el gráfico a su gusto sin el espacio vacío arriba y abajo.

¿Hay alguna manera de forzar que el lienzo se escale con la altura?

Aquí están los elementos HTML que componen el gráfico:

 <div class='graphHolder' id='graphHolder1'> <div class='graph' id='graph1'> <canvas class='chart' id='chart' height='100%'></canvas> </div> </div>

Y aquí está el CSS para esos elementos:

 .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: ; }