Skip to content

Use :has() to activate fillable containers in tandem with fill items #388

@gadenbuie

Description

@gadenbuie

When (or if) support for :has() lands in Firefox or generally picks up, it could be nice to refactor fillable containers such that they only become flex containers when they include a fillable item as a direct child.

The immediate advantage of this approach would be that elements in a card body or other fillable container would be spaced "as expected", i.e. as if they were in a normal display: block container. Currently, the display: flex of .html-fill-container (fillable containers) changes the ideal spacing module from margin to gap, and bslib does some work to internally pick the right one.

.html-fill-container:has(> .html-fill-item) {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions