Fill containers clip child content

[gadenbuie]

We currently use overflow: auto in .html-fill-container classes, which has the unfortunate side-effect of clipping the content of child containers. Instead, we can set min-width: 0 and min-height: 0 to achieve a similar effect.

ChatGPT summarizes this approach well:

Using min-height: 0 or min-width: 0 (or both) on a flex container is a common technique in CSS to prevent the container from expanding vertically or horizontally beyond its parent's constraints. When a flex container has a fixed size parent or is nested within other flexible elements, it may encounter issues with overflowing content or unexpected alignment behavior.

By setting min-height: 0 or min-width: 0, it essentially resets the minimum height or width constraint on the flex container, allowing it to shrink and accommodate its contents properly. This is especially useful when dealing with flex items that have a flex-shrink property set, making them capable of shrinking beyond their content's intrinsic size.

Here's a minimal reprex using the existing fill.css. We want the shadow on the child container to appear in both examples, but without explicitly setting overflow: visible (as in the second card where it's shown as expected).

library(htmltools)
library(bslib)

page_fixed(
  bindFillRole(
    container = TRUE,
    div(
      class = "m-3 float-left",
      style = css(height = "300px", width = "300px"),
      bindFillRole(
        div(class = "border border-2 shadow"),
        item = TRUE
      )
    )
  ),
  bindFillRole(
    container = TRUE,
    div(
      class = "overflow-visible",
      class = "m-3 float-left",
      style = css(height = "300px", width = "300px"),
      bindFillRole(
        div(class = "border border-2 shadow"),
        item = TRUE
      )
    )
  )
)