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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions