[csswg-drafts] Not clamping baseline position when scrollable overflow gives weird results (#7660)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== Not clamping baseline position when scrollable overflow gives weird results ==
Currently, [the spec defines](https://www.w3.org/TR/css-flexbox-1/#flex-baselines) that the baselines of scrollable flex/grid items are calculated assuming the item is at its initial scroll position. This allows (and impls currently accept) the baseline to be substantially outside of the box itself, if the first line of text is taller than the box.

See [testcase](https://www.software.hixie.ch/utilities/js/live-dom-viewer/saved/10643):
```html
<!DOCTYPE html>
<div style="display: inline-flex; border: solid; overflow: scroll; height: 100px; font-size: 200px">
  This<br>is<br>a<br>text
</div>
text
```
Per our (not currently applied to the spec...) resolution in #2781, scrollable inline-blocks should take their baseline from their content, clamped by the bottom edge of the box, precisely to avoid this unintuitive behavior. (That said, for inline blocks specifically, we may be constrained by compat to ignoring the baselines of scrollable boxes and just using the margin edge; but at least it's still within the edges of the box.)

Regardless of inline blocks, we should apply this clamping behavior in flex and grid layout, and to whichever atomic inlines we can.

This would be a change away from cross-browser consistent behavior, but the current behavior is very bad and very unlikely to be relied upon (it requires the first line to be taller than the item). As last-baseline alignment begins to be implemented, however, it will become much easier to trigger.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7660 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 29 August 2022 21:48:24 UTC