Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(fillability): Don't allow shrinking of non-fill items in fillable containers #391

Merged
merged 2 commits into from
Aug 1, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions NEWS.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@

* Closed #386: Fillable containers no longer set `overflow: auto` by default. Instead, they set `min-width` and `min-height` to `0` to ensure that fill items a constrained in the fillable container without clipping their direct children. (#387)

* Closed #370: Non-fill items in fillable containers no longer grow or shrink and instead respect their intrinsic size. Use `height` to control the height of non-fill items in fillable containers and `min-height` and `max-height` on fill items to limit how much they are allowed to grow or shrink within a fillable container. (#391)

# htmltools 0.5.5

## Bug fixes
Expand Down
6 changes: 6 additions & 0 deletions inst/fill/fill.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,16 @@
min-height: 0;
}
.html-fill-container > .html-fill-item {
/* Fill items can grow and shrink freely within
available vertical space in fillable container */
flex: 1 1 auto;
overflow: auto;
width: 100%;
}
.html-fill-container > :not(.html-fill-item) {
/* Prevent shrinking or growing of non-fill items */
flex: 0 0 auto;
}
cpsievert marked this conversation as resolved.
Show resolved Hide resolved
.html-fill-container > .html-fill-item.html-fill-item-overflow-hidden {
overflow: hidden;
}