W3C home > Mailing lists > Public > www-style@w3.org > April 2013

Re: [css3-multicol] Overflow and max-height

From: Håkon Wium Lie <howcome@opera.com>
Date: Thu, 4 Apr 2013 19:59:23 +0200
Message-ID: <20829.49019.45828.197472@gargle.gargle.HOWL>
To: Leo Koppelkamm <hello@leo-koppelkamm.de>
Cc: www-style@w3.org
Also sprach Leo Koppelkamm:

 > currently the spec suggests that if height is constrained, content
 > should be rendered outside of the column box (overflow columns).

Yes. 

 > If you put two column boxes next two each other the overflowing
 > content is rendered over the next column. (Example:
 > http://jsfiddle.net/sHyzL/31/embedded/result/ )

Within the same multicol element, column boxes are laid out so that
they do not overlap. But you will may get overlapping content if you
place two multicol elements with overflow next to each other -- just
like you may get overlapping content if you place two other elements
with overflow next to each other.

 > This is ugly and makes some layout impossible to realise:
 > 
 > Imagine a site where two articles sit next two each other. Their boxes have a max-height.

 > The text-length varies. Sometimes the text fits in one column,
 > sometimes not. ( Mockup:
 > http://leo-koppelkamm.de/public/Overflow-Layout-01.png )
 > 
 > I propose an extension to the overflow property: a new value
 > "expand". In the context of columns it would resize the bounding
 > box until the content safely fits in.

Would this override the set width? For example, how wide would this
element be?

  <div style="columns: 3; height: 100px; width: 600px; overflow: expand">lots of content .... </div>

Typically, the elements that are constrained in height have an auto
width and no other elements on the side. In a browser, the overflow
content is then slightly hidden behind a scrollbar. Like in this case:

  http://people.opera.com/howcome/2013/tests/multicol-height.html

Which I think is reasonable behavior. (In paged media, the extra
content can be placed on a subsequent page.)

Have you considered the overflow: paged-x/paged-y values?

  http://dev.w3.org/csswg/css-gcpm/#paged-presentations

They avoid overlapping content by introducing paged. 

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Thursday, 4 April 2013 18:00:23 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 4 April 2013 18:00:23 UTC