How to force objects to stay inside a bootstrap container/card (html, css, plotly, bootstrap, django-CodePudding

I'm making a django-based web app that has bootstrap cards with some graphs inside of them. I'm using bootstrap so both the graphs and the cards are responsive; however at some screen sizes, the graphs extend beyond the size of the cards. Is there a way to force everything in a card (or some other container) to say inside the container?

Partial html code. Can post the graph code if helpful - it is written in python plotly. I'm not sure if the problem is with the graphing or with the html/script.

<div >
   <h2 >Scores for {{ user.username }} </h2>
        <div >
            <div >
                <div >
                  <div >
                    <h5 >Result</h5>
                    <p style="color:gray;"> {{last_test_date | safe}}</p>
                    {{score | safe}}
                     <!-- <div  id="bargraph1", style="height: 150px">-->
                        <div  id="bargraph1">
                         <script>
                            var graphs = {{plot1 | safe}}
                         </script>
                     </div>
                      <a href="#" >Learn More</a>            
                  </div>
                </div>
             <div >
                <div >
                   <div >
                    <h5 >Results Over Time</h5>
                    <br>
                      <!--<div  id="bargraph2", style="height: 225px">-->
                        <div  id="bargraph2">
                         <script>
                            var graphs = {{plot2 | safe}}
                         </script>
                      </div>
                   </div>
                </div>
        </div>
    </div>

CodePudding user response：

reference

CSS Units - What is the difference between vh/vw and %?

You can try editing the CSS of bar graph1&2 as out of 100%. the percent at the end can apply to a fixed parent container like card-body

CodePudding user response：

Give 100% width to the graphs.

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