ASP.NET Webforms Gridview width expanding outside container

Do you have an ASP.NET Webforms application with the GridView expanding outside of its container? Your markup might look like this:

<%--Markup to enter search criteria and then set Visible="true" on the ResultsPanel for example--%>
...
<%--Markup to show results--%>

    
...
    
...

Because the GridView uses a table, sometimes the width of it might expand to larger than your browser window. This might be fine (you could use the scroll bar at the bottom of the browser window), but it also might also cause a problem for example if you have the default widths (width: 100%) in your CSS. You could end up with with the inner part of the GridView extending off the right of the page.

When I originally had this problem I didn’t find a good fix by Googling. The fix is quite simple. Put a CssClass=”results” on the ResultsPanel (the outer div) and define the following CSS:

.results {
    overflow:auto;
}

This will put a scroll bar on the bottom of the GridView.