Re: [css3-multicol] overflow and paging?

On Thu, Oct 14, 2010 at 8:17 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> On Oct 14, 2010, at 7:23 AM, Shelby Moore wrote:
>
>> I had a slight mistake in specifying my case in my prior emails on this
>> thread, where I forgot to mention that the constraints are in the parent
>> of the multi-column container element.  A corrected example of my case is:
>>
>> <div style='width:250px; height:600px; overflow:auto'>
>>   <div style='-moz-column-width:125px; -webkit-column-width:125px;
>> column-width:125px; -moz-column-gap:3px; -webkit-column-gap:3px;
>> column-gap:3px'>
>>      ...same example content as I reported before
>>   </div>
>> </div>
>>
>> In the above example, and if the block direction is vertical, currently
>> the browsers I have tested (IE6, FF3.5.x/3.6.x, latest Chrome) are not
>> adding any columns in either direction, but rather allowing the column
>> height to exceed the constrained height (as inherited from the element
>> which is the parent of the multi-column container) in violation of Section
>> 8.2, thus causing a vertical scroll bar to appear on that parent element.
>
> I don't see how you figure that is constraining the height of the multi-col DIV. The outer container is overflowing, and has no effect on the height of its child, unless that container is the page in paged media.
>
> From 8.2:
> "Content that extend outside _column boxes_ at the edges of the multi-column element is clipped according to the ‘overflow’ property.
> A multicol element can have more columns than it has room for due to:
>        • Constrained column height. A declaration that constrains the column height (e.g., using ‘height’) must be honored, if possible. In paged media, the column height is constrained by the size of the page."
>
> The height of your container is not constraining the height of the multi-column element. It allows that element to grow as tall as it wants, and thus overflow that parent.

Brad is correct.  In the code you provided, the inner div's height is
*not* constrained.  Its height is 'auto'.  If you just had a bunch of
<p>s with a lot of content it would grow the element the same way,
causing the outer div to overflow but not the inner one (it just gets
big; it won't trigger overflow behavior on itself).

If you set the inner div's height to 100%, then it should have the
behavior you want.

~TJ

Received on Thursday, 14 October 2010 17:47:25 UTC