Scrolling div inside another div

Question

Here is my code:

<form id="form1" runat="server">
<div style="width:100%;">
    <asp:FormView ID="fvXCAR" runat="server" DefaultMode="Edit" style="overflow:auto">
        <ItemTemplate></ItemTemplate>
        <EditItemTemplate>
            <div style="width:800; overflow:auto;">
                <asp:Table ID="tblXCAR" runat="server"></asp:Table>
            </div>
        </EditItemTemplate>            
    </asp:FormView>
</div>
</form>

And here is my question:

I want the internal div (the one with overflow:scroll) to scroll. If I set that div to any fixed value, the scroll works properly. If I set it to 100%, the outer div scrolls, not the inner one. However, I'd like to be able to set both divs width to auto/100% because my users have many different screen sizes/resolutions.

Thanks, John

Answer 1

I know I'm not supposed to edit here but I can't find any way to edit my post.

I should have said overflow:auto not overflow:scroll.

Thanks,

Answer 2

Situations like this generally require javascript to run on page load and page resize. That javascript would measure the new width of the parent div and then set the child div's width to match. The child would then have the "overflow: auto" text, and the parent would have width: 100%.

Answer 3

This should work: JS fiddle Solution

You should use hard-coded height:100% and overflow:hidden on the parent elements. You can see the wrapper div as the user's window.

Note: because of the padding, there are 10 pixels hidden at the bottom. Without padding this is not an issue of course. I just added that so you can see the difference between the outer and inner div.