Home/ Questions/Q 8854185
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T13:49:36+00:00

I have HTML with a div and a nested div. The nested div has

  • 0

I have HTML with a div and a nested div. The nested div has half the width of the container div, but is twice as high. The container div scrolls when overflowing.

html, body, form
{
    height:100%;
    margin:0px;
    padding: 0px; 
}    

div#outer
{
    height:200px;
    width: 500px;
    overflow:scroll;
    background-color:Green;    
}

div#inner
{
    height:400px;
    width: 250px;
    background-color:Red;
}

<body>
<form id="form1" runat="server">
    <div id="outer">
        <div id="inner"></div>
    </div>
</form>

When I scroll, the complete area has a background half red, half green. Why does the lower right area have a green background? This does not happen if I set overflow:visible (it´s not filled then).

EDIT: adding JSFiddle for example.
http://jsfiddle.net/2Y52V/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    visible overflow means that the content will “spill over” the boundaries of the parent. So the actual size of the parent, if defined, will not change. But other overflow strategies keep the contents within the bounds of the parent, almost like “stretching” the parent. Overflow is often used as a clearfix solution (i.e. overflow: hidden when having floated children) because of this property. It effectively stretches the parent to match, while maintaining the physical size of it by using a scrollbar.

    • 0