Non-fill tags shrink inside a fill container context

[cpsievert]

For example, both #inner and #inner2 shrink to a size of 150px (since the default value of flex-shrink is 1, not 0). Based on our current fill semantics, that's probably surprising behavior.

tagz <- div(
  id = "outer",
  style = css(
    height = "300px",
    border = "3px red solid"
  ),
  div(
    id = "inner",
    style = css(
      height = "250px",
      border = "3px blue solid"
    )
  ),
  div(
    id = "inner2",
    style = css(
      height = "250px",
      border = "3px blue solid"
    )
  )
)

tagz <- bindFillRole(tagz, container = TRUE)
tagz <- bindFillRole(tagz, item = TRUE, .cssSelector = "#inner")

browsable(tagz)

We could/should probably fix this by adding something like this to inst/fill/fill.css

.html-fill-container > :not(.html-fill-item) {
  flex: 0 0 auto;
}

[gadenbuie]

After investigating this and discussing with Carson, we think the best approach is to add

.html-fill-container > :not(.html-fill-item) {
  flex: 0 0 auto;
}

The flex: 0 0 auto changes the default flex behavior of a non-fill item so that it won't grow or shrink in the display: flex context of a fillable container. This ensures that non-fill items with a set height behave consistently inside and outside a fillable container.

Outdated

The `min-height: 0` attribute also reduces flex-related size changes, in particular when the height of the non-fill-item is driven by its contents. The alternative is to apply `overflow: auto`, but we'd prefer not to set overflow directly on any elements other than fill items in a fillable container. In Bootstrap contexts, especially in BS5, users can add `overflow-auto`, `overflow-hidden` or `overflow-scroll` utility classes to choose the overflow behavior of the non-fill item.

Edit: It turns out the min-height: 0 isn't required because flex-shrink is 0.