html css google-apps-script google-sheets sidebar

Div element not adjusting to change in page width

I am having difficulty trying to get Google Charts to adjust to the changes in page width when the scroll bar appears in Google Chrome. I am displaying this data in the Google Sheets sidebar (I believe has a width of 300px). The chart always goes to the outside of the parent div and ignores the right inner margin. When the scroll bar appears due to a longer page, the image should also adjust to maintain the proper right margin. I would like the right margin to be the same as the left. For text this seems to work fine, but not for images such as charts.

This image is the current output. The picture should have the same margin on the right as it does on the left. If the image is too wide, it should ideally adjust it's width to stay inside its container.

I have created the problem below using an image instead of a Google chart for simpler code.

Code.gs

function onOpen() {
  SpreadsheetApp.getUi().createMenu("My Menu")
    .addItem("My Item", "showForm")
    .addToUi();
}

function include (filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function showForm() {
  var htmlWidget = HtmlService.createTemplateFromFile('Form');
  SpreadsheetApp.getUi().showSidebar(htmlWidget.evaluate().setTitle("My Form"));
}

Form.html:

<!DOCTYPE html>
<html>
  
<head>
  <base target="_top">
  <?!= include('Form-CSS'); ?>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      var options = {'title':'How Much Pizza I Ate Last Night', 'width':'100%'};

      var chart = new google.visualization.PieChart(document.getElementById('mychart'));
      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div class="wrap-collapsible">
    <input id="collapsible1" class="toggle" type="checkbox">
    <label for="collapsible1" class="lbl-toggle">Button 1</label>
    <div class="collapsible-content">
      <div class="content-inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
      </div>
    </div>
  </div>

  <div class="wrap-collapsible">
    <input id="collapsible2" class="toggle" type="checkbox">
    <label for="collapsible2" class="lbl-toggle">Button 2</label>
    <div class="collapsible-content">
      <div class="content-inner">
        <div id="mychart" style="width: auto; max-width: 100%;"></div>
        
      </div>
    </div>
  </div>
  
</body>

</html>

Form-CSS:

<style>
  @import url('https://fonts.googleapis.com/css2?family='Roboto'&display=swap');

  body {
    background-color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
  }

  .wrap-collapsible {
    margin-bottom: 8px;
  }

  input[type='checkbox'] {
    display: none;
  }

  .lbl-toggle {
    display: block;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    text-align: left;
    padding: 5px 10px 5px;
    color: black;
    background: coral;
    cursor: pointer;
    border: 1px solid black;
    transition: 0.2s ease-out;
  }

  .lbl-toggle::before {
    content: '\25B6';
    color: black;
    font-weight: bold;
    font-size: 12px;
    float: right;
    margin-top: 7px;
    margin-left: 0px;
    transition: transform 0.2s ease-out;
  }

  .toggle:checked+.lbl-toggle::before {
    transform: rotate(90deg);
  }

  .collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
  }

  .toggle:checked+.lbl-toggle+.collapsible-content {
    max-height: 300vh;
  }

  .collapsible-content .content-inner {
    background: bisque;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding: 5px;
  }
</style>

Solution

If you inspect the element, it is inside a div with a max width of 272. You have 2 ways to fix this:

You can either set it manually width="272" or you can use the code below which will automatically adjust the width of the picture.

Try:

<div >
  <img src="https://www.w3schools.com/html/pic_trulli.jpg" style="
  width: auto;
  max-width: 100%;
  overflow: hidden;">
</div>

Result:

Note: I have updated the code, I added overflow: hidden; For more information: CSS: Overflow