title: How to overflow image inside Bootstrap row
body: <p>I'm trying to display an oversized image to fix inside a bootstrap row with the size col of 12. But whenever I do this, the image makes the row stretch all the way across and outside of the screen. I want keep the row width the same, but have it overflow with a scroll if the image gets too big inside the div. How should I do this? Below is the code that I've got.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="imageRow" class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div id='imgContainer' runat="server" class='imgContainer' visible="false"&gt;
                  &lt;asp:Image runat='server' ID='imgDocument' Visible="false" CssClass='imgDocument clear'/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.imgContainer {
      position: relative;
      overflow: scroll;
      width: 100%;
      height: 600px;
  }
  </code></pre>
  
  <p>P.S. I tried using Max-width, but it doesn't work as this will just simply limits the width of my image to fix inside the div without a scrollbar for it. I.e. it won't allow it to go oversize</p>