You’re reading diehealthy.org

Posted in:

Wanted in CSS: Shrinking when Overflowed and Scrolling.

A feature that would make the edge between almost-scrolling and scrolling a bit nicer.

Sometimes I want an element to have its height restricted, so that if it’s too long it will scroll. But, if it does scroll, I want its height to be more restricted. In other words, if it’s going to scroll, it should scroll a good bit, not just a single line. I’ll throw an example here:

A container filled with Lorem ipsum that barely scrolls.

Compare that behavior with the two containers here:

Two containers filled with Lorem ipsum. The container on the left does not scroll, while the shorter container on right—which contains an extra paragraph—does scroll.

I believe styling to automatically behave as above is currently impossible without Javascript. The closest feature I could find is the scroll-state feature of container queries. Container queries are restricted to avoid layout cycles (i.e., infinite loops), so there’s probably no good way to work around that and accomplish the above. Neither Firefox nor Safari implements them yet anyway. See MDN: CSS container-type (Browser compatibility).

The first alternative is to set a max-height cutoff and be happy with it. But if we need to scroll, we should need to scroll more than a little bit. If something only scrolls to show the last line, as in the first example? That’s a waste of everyone’s time! It’s ugly and unprofessional. If there’s room, we’d prefer the block be a little bit bigger in those cases, to avoid a short scroll.

The other alternative is to make the element’s max-height extra-short, so that it scrolls in most cases. Again, this is worse. If there’s enough space, it shouldn’t need to scroll, and we shouldn’t enforce scrolling to avoid this edge-case. Indeed, there’s got to be some sensible minimum ratio (I’d guess four-thirds) that a scrollable container should always hold compared to its height. The obvious case excepted: a full-height container, which couldn’t possibly not scroll once the content’s intrinsic height exceeds its own.

Assuming it were adopted as a new feature of CSS, it might look like:

div.maybe-overflow {
    max-height: 600px; /* The longer case */
    scroll-height: 400px; /* The scrolling case */
}
Hypothetical syntax to allow the scrolling container to have its own height.

This isn’t hard to implement. The container query limitations are their own challenge, but the browser can readily decide the layout height through its normal process, and if it’s more than height or max-height, it can choose to use scroll-height. Otherwise, it uses the calculated height, just like if there were no scroll-height. It shouldn’t need any kind of query-type declarations to do this. So I think it’s a missing feature. Whether it’s a missing feature enough designers would want, enough to merit inclusion in CSS and being added to browsers, is its own question.

For clarity:

  1. Calculate the height as normal (including min-height, max-height, and height).
  2. If the calculated height would scroll and scroll-height is specified, use that.

  3. If the scroll-height conflicts with the maximum or minimum, consider it invalid and use the previously calculated height.

Should scroll-height ever expand the height (be bigger than what the calculated height would otherwise be)? I don’t think it would hurt anything, given the ability to add constraints with minimum and maximum. You would have to recognize it as scrolling even if it expanded to not need to, but it wouldn’t need to trigger a cycle. But I don’t see any obvious use for it, either. If a specification were to avoid it, it would probably be better to use the ratio instead of the explicit size? I do think there would be cases for a scroll-width equivalent, especially for containers that don’t directly hold text.

In all, it would be nice to have this available in CSS. There are design decisions that aren’t currently available for lack of tools to make them, at least without adding Javascript. While that’s fine for more complex behavior, simpler things that could be part of any designer’s kit can hopefully be added to stylesheets.

internet radio

Punk4Punks

Go hear some punk rock music.

Please Deposit Two Cents:

This site uses Akismet to reduce spam. Learn how your comment data is processed.