title: Why is a scroll bar coming out in my maps infowindow in chrome?
body: <p>Here is the JavaScript: </p>
  
  <pre><code>$(document).ready(function(){
  
  //set location of san antonio 
  var san_antonio = new google.maps.LatLng(29.4, -98.544);
  
  //set infowindow
  var infoWindow;
  
  //object literal containing the properties
  var options = {
    zoom: 9,
    center: san_antonio,
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  }
  
  //create the map
  var map = new google.maps.Map(document.getElementById('map'), options);
  
  //create marker
  var marker = new google.maps.Marker({
    position: san_antonio,
    map:map,
    title: "san antonio"
  });
  
  
  //add 'click' event listener
  google.maps.event.addListener(marker, 'click', function(){
  
  //creates infowindow if it already doesn't exist
  if (!infoWindow){
    infoWindow = new google.maps.InfoWindow();
  }
  
  //create content for infowindow
  var content = '&lt;div id="information"&gt;'+'&lt;img src="http://a1.twimg.com/profile_images/1549555880/Screenshot.png"/&gt;'+'&lt;/div&gt;'
  
  //set content of the infowindow. 
  infoWindow.setContent(content);
  
  //open infowindow on click of marker 
  infoWindow.open(map,marker);
  
  //ends the event listener
  }); 
  
  
  //ends the DOM loader
  });
  </code></pre>
  
  <p>In chrome i get an unwanted scroll bar in the infowindow when it pops up. If you look at the bottom right corner you will notice that there is a little bit of distortion as well.</p>
  
  <h1>In Chrome</h1>
  
  <p><img src="https://i.stack.imgur.com/rwTAj.png" alt="my infowindow rendering in chrome"></p>
  
  <p>The infowindow looks great in Firefox. I was not having this problem last night when I was working on my desktop, so I am thinking that my chrome installation may be broken on my laptop. What do you think? Here is what it looks like in FireFox: </p>
  
  <h1>In FireFox</h1>
  
  <p><img src="https://i.stack.imgur.com/4dR4C.png" alt="einfowindow rendering in firefox"></p>
  
  <p>I tried doing <code>div#information{overflow:hidden}</code>, but nothing changed
  I then tried doing  <code>div#information{overflow:hidden;height:500px;background-color:green;}</code>, and then the scroll bar just got longer.
  This is telling me that the infowindow is acting as its own div and that the 'information' div's height is causing the infowindow's scroll bar to get larger.
  <img src="https://i.stack.imgur.com/MInTU.png" alt="enter image description here"> </p>
  
  <hr>