Estoy creando una aplicación web basada en django que tiene tarjetas de arranque con algunos gráficos dentro de ellas. Estoy usando bootstrap para que tanto los gráficos como las tarjetas respondan; sin embargo, en algunos tamaños de pantalla, los gráficos se extienden más allá del tamaño de las tarjetas. ¿Hay alguna manera de forzar que todo en una tarjeta (o algún otro contenedor) diga dentro del contenedor?

Código html parcial. Puede publicar el código del gráfico si es útil: está escrito en python + plotly. No estoy seguro si el problema está en los gráficos o en el html/script.

 <div class="container"> <h2 class="pb-2 border-bottom mt-4">Scores for {{ user.username }} </h2> <div class="row mb-4 mt-4"> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <h5 class="card-titler">Result</h5> <p style="color:gray;"> {{last_test_date | safe}}</p> {{score | safe}} <!-- <div class="chart" id="bargraph1", style="height: 150px">--> <div class="chart" id="bargraph1"> <script> var graphs = {{plot1 | safe}} </script> </div> <a href="#" class="card-link text-end p-2">Learn More</a> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">Results Over Time</h5> <br> <!--<div class="chart" id="bargraph2", style="height: 225px">--> <div class="chart" id="bargraph2"> <script> var graphs = {{plot2 | safe}} </script> </div> </div> </div> </div> </div>