Skip to content

[css-contain-3] What happens when the queried dimension is not contained by the nearest container? #6303

Closed
@mirisuzanne

Description

@mirisuzanne

When we have nested containers, with different contained axes, do we only query the nearest container -- or do we query the nearest container which has the proper containment? For example:

<style>
  @container (block-size >= 100px) {
    p { background: green; }
  }
</style>

<html style="contain: size layout style; block-size: 200px;">
  <main style="contain: inline-size layout style">
    <p>query</p>
  </main>
</html>
  1. If we query the nearest ancestor that is a container (main), the match is false because the block-size is not contained, and cannot be queried
  2. If we look for the nearest ancestor with block containment (html), the match is true because the block size matches the given condition

I think in this case we want option 2, and should only consider an ancestor to be "a container" if it meets all the required containment criteria. But maybe I'm missing something?

@andruud @lilles - do you have thoughts on this?

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