When the Child dictates the width of a Parent which has overflow: auto, Firefox doesn't allow space for the added width of a scrollbar (15px) which leaves the Child getting cut off and an overflow-x to appear on the Parent.
What's the best way to fix this issue?
https://codepen.io/rhysyg03/pen/wrKQJG
.content {
position: absolute;
overflow-y: auto;
min-width:150px;
max-height: 300px;
padding: 8px;
background:white;
border:1px solid rgba(0,0,0,.12);
}
For example, adding padding-right: 15px fixes the issue but then leaves the other browser's with an extra 15px.
Or adding a fixed width to the Parent fixes issue but then you're bound to a fixed width restriction and I want to leave the Parent flexible.
Or adding overflow-x: hidden hides the scrollbar, but leaves the Child cut off.
Update: display: flex on Parent fixes the issue for regular widths (ie: an image) but not the widths set by text with whitespace: nowrap.
Thanks.
Firefox:
Chrome:
you can use @-moz-document
to write some styles could be recognized by firefox only. see this: https://developer.mozilla.org/en-US/docs/Web/CSS/@document .
hopes helpful.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.