div继承宽度和高度并滚动

Question

How can i make a DIV inherit its Width and Height from its container without a fixed defined height and width, cover the whole area inside the container by default and scroll instead of increasing its height or width . eg

<td style="width:400px; ">
<div style="overflow:scroll; ">
</div>
</td>

This DIV should cover 400px and when the content exceeds from this width it should scroll. The container could be a TD or SPAN. One approach might be to have a CSS class with just a defined width and apply on both container and the div, But, i dont know where else this DIV would be used and what is the width of its container.

Edit 1 By setting max-width to 100px i get what i desired but otherwise it increases the width of the container. It is probably because the container have width in %. It looks i need to find the initial width of the container and then set DIV's max-width. Is it?

Edit 2 There is a grid inside this Div. When the max-width is defined in the style of the DIV, it reflects the behavior i need when it is set via JS the width is OK when page loads but when a link is clicked to load the data inside grid it looses max-width property.

<script type="text/javascript">
    var w = document.getElementById("divgrid").style.maxWidth;
    if (w == null || w == NaN || w <= 0 || w.toString() == '')
    w = document.getElementById("divgrid").offsetWidth;
    document.getElementById('divgrid').style.maxWidth = w + 'px';
</script>

Answer 1

width:100%; height:100%; overflow:scroll;

Answer 2

You picked two interesting container elements, since spans have a default display value of inline and tables have a default value of table . Neither respect the overflow property, so to create scrollbars around a div element you need to set them to display:block . Using your above example:

HTML

<table>
    <tr>
        <td>
            <div>...lots of text here...</div>
        </td>
   </tr>
</table>

CSS

table{
    height:100px;
    width:100px;
    display:block; 
    overflow:scroll;
}

Aand here's a jsFiddle

Answer 3

use overflow-x:scroll in table or td

eg

<table style="width:400px; overflow-x:scroll;">
   <tr>
     <td><div>content</div></td>
   </tr>

</table>