Как заставить графики оставаться внутри контейнера/карты bootstrap (html, css, plotly, bootstrap, django)?

Я делаю веб-приложение на основе django, в котором есть карточки bootstrap с некоторыми графиками внутри них. Я использую bootstrap, поэтому и графики, и карточки отзывчивы; однако при некоторых размерах экрана графики выходят за пределы карточек. Есть ли способ заставить все, что находится в карточке (или другом контейнере), указывать внутри контейнера?

Частичный html-код. Если поможет, могу выложить код графика - он написан на python + plotly. Я не уверен, проблема в графике или в html/скрипте. Я также работаю над размещением изображения, но загрузка не удается :).

<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>

ссылка

CSS Units - Какая разница между vh/vw и %?

Вы можете попробовать отредактировать CSS bar graph1&2 как не 100%. процент в конце может применяться к фиксированному родительскому контейнеру, такому как card-body

Придайте 100% ширины графикам.

#bargraph1,#bargraph2{
    width:100%;
}

Вернуться на верх