父级不会因Firefox中增加的滚动条宽度而变大

Question

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:

Answer 1

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.