Skip to content

[css-align-3][css-flexbox-1] How to determine the last baseline of a flex container with different alignment groups. #7641

@bfgeek

Description

@bfgeek

See: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10608

<!DOCTYPE html>
<div style="display: inline-flex; align-items: last baseline;">
  <div style="background: lime; font-size: 30px;">line1<br>line2</div>
  <div style="display: flex;">
    <div style="font-size: 30px; align-self: last baseline; background: cyan;">line1<br>line2<br>line3</div> 
    <div style="font-size: 80px; align-self: baseline; background: hotpink;">line1<br>line2</div> 
  </div>
</div>

https://drafts.csswg.org/css-flexbox-1/#flex-baselines

Should the last baseline of the "lime" box be aligned with the last-baseline of the "cyan" box, or the "hotpink" box?

The rules just look at if something "participates in baseline alignment" so by that rule it should be the "hotpink" box.
But likely should be the "cyan" box.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions