title: Asp.net gridview overflows parent div when it has lots of columns
body: <p>I'm trying to make a gridview fit inside a div using relative widths , but it always breaks out its parent container when it has too many columns.</p>
  
  <p>I know that using a fixed width like this would apparently solve the problem, but if I re-size the window a little bit, the gridview will overflow again as it has a specific width.</p>
  
  <pre><code>&lt;div style="overflow: scroll; width: 1000px; Height: 300px;"&gt;
     &lt;asp:GridView id="GridView1" runat="server"  /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there any way I can specify a relative with to the container and use overflow:scroll as well so that if I re-size the window the gridview will re-size with its container.</p>
  
  <p>Here's a few images of what is happening using a <code>width:100%</code>
  One thing that I noticed here is that when the window is 100% zoom the gridview overflows its container but as I decrease the zoom the problem seems to disappear. Really strange :S</p>
  
  <p>I'd really appreciate if someone could help here.</p>
  
  <p><strong>100% zoom</strong></p>
  
  <p><a href="https://i.stack.imgur.com/E2jON.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E2jON.png" alt="enter image description here"></a></p>
  
  <p><strong>75% zoom</strong></p>
  
  <p><a href="https://i.stack.imgur.com/QsHSm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QsHSm.png" alt="enter image description here"></a></p>
  
  <p><strong>65% zoom</strong></p>
  
  <p><a href="https://i.stack.imgur.com/J3Nu6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J3Nu6.png" alt="enter image description here"></a></p>