`responsive` doesn't work if a parent has padding and `min-width: min-content`
Open
Nobody has claimed this yet.
bug
P2
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
steps to reproduce:
- open this fiddle https://jsfiddle.net/rhdq9ynu/5/
- use ctrl+mousewheel to zoom out to 30%
- use ctrl+mousewheel to zoom back in to 100%
- notice that the plot now overflows its parent and the home icon in the top is no longer visible.
before
after
The key is this CSS:
#app {
padding: 0px 100px;
& > * {
min-width: min-content;
}
}
If you remove either the padding or the min-width everything works fine.
Both min-content and fit-content are buggy.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked JSFiddle and reproduce the zoom sequence with the shown padding and min-width CSS. No repository file or test is named; done means the plot remains within its parent and the home icon remains visible after zooming back to 100%, including with min-content and fit-content.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100