Re: [csswg-drafts] [css-align] Special case for inline-block+scroll-container elements needs to cover inline blocks that **contain** scroll containers (#3611)

You're right that the first condition isn't sufficient, but some testing by me and @fantasai seems to show that it should be broadened in a different way.

If the inline-block contains a scrollable *flexbox*, it still gets baseline-aligned per its content:

```html
<!DOCTYPE html>
<style>
.inline-block { display: inline-block; }
.test {
  background-color: lightgrey;
  overflow: hidden;
}
.border { border: solid blue;  border-width: 1px 3px 5px 7px; }
.padding { padding: 10px; }
.margin { margin: 1px 3px 5px 7px; }
</style>

The boxes should align vertically:
<div class="inline-block">
  <div>
      <div class="test border padding margin" style="display:flex">X</div>
  </div>
</div>

<div class="test inline-block margin border padding">X</div>
```

So it looks like the condition, rather than "inline-blocks that are scroll containers", should be "block containers that are scroll containers".

That covers the original condition, *and* makes your testcase valid per spec, as the inline-block tries to determine its baselines from its content, sees only a scrollable block container, and concludes that it has no baselines. (And then, per Inline, it synthesizes baselines from its own margin box.)

Does this sound correct?



----

Aside: Form controls are fun here, as semi-replaced elements. `input` is baseline-aligned (and can't be made scrollable), but `textarea` and `<select multiple>` margin-align (because they're inherently scrollable). This should be written down somewhere...

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3611#issuecomment-572756316 using your GitHub account

Received on Thursday, 9 January 2020 21:07:23 UTC