New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-multicol] Overflow in the block direction for continuous media #2923

Open
rachelandrew opened this Issue Jul 13, 2018 · 2 comments

Comments

3 participants
@rachelandrew
Copy link
Contributor

rachelandrew commented Jul 13, 2018

In multicol 1, overflow in continuous media happens in the inline direction, therefore if we restrict a multicol container by height and the content of that container creates more columns than will fit, new columns are created in the inline direction and we get a horizontal scrollbar. This is, in general, not what web authors want.

Overflow in the Block direction would enable something like the below image, where the additional columns are created below the initial multicol container.

overflow-block-direction

In talking to web authors, there was an interest in this ability. Use cases would be to give the multicol container a height in viewport units in order to know that a reader would not have to scroll up and down to read the content, instead they could read one set of columns, scroll down and read the next. There are examples of people using vertical media queries to check for enough space to display columns such as https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-12

When discussing this, authors immediately jumped to the need/desire to control those overflow columns in some way, perhaps by being able to specify a different number of columns/column width in the overflow. For example having the first set of column boxes render three columns, and the second two.

@rachelandrew rachelandrew self-assigned this Jul 13, 2018

@rachelandrew rachelandrew added this to Level 2 in css-multicol-1 Jul 13, 2018

@frivoal

This comment has been minimized.

Copy link
Collaborator

frivoal commented Jul 13, 2018

I have a work-in-progress draft spec to deal with putting additional columns in the block direction (and sizing things properly, so that these extra columns are not only overflow, but actually consume space and don't collide with what's after). I'll share as soon as it is a bit more fleshed out.

When it comes to styling the next row(s) of columns differently, I think this will be solved by continue: fragment and ::nth-fragment](https://drafts.csswg.org/css-overflow-4/#fragment-pseudo-element). That isn't solved yet, but we're making baby steps towards it in css-overflow-3, since line-clamp starts to put in place some of the related machinery.

@arnt

This comment has been minimized.

Copy link

arnt commented Jan 12, 2019

For paged media, please make the default height of the multicol container be "to the bottom of the current page".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment