父級不會因Firefox中增加的滾動條寬度而變大

Question

當子級指示具有溢出：自動的父級的寬度時，Firefox不允許為滾動條增加的寬度（15px）留出空間，這會使子級被截斷，並且在父級上會出現一個溢出x。

解決此問題的最佳方法是什么？

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);
}

例如，添加padding-right：15px可以解決此問題，但其他瀏覽器則需要額外的15px。

或為“父級修復”問題添加固定寬度，但是您受到固定寬度限制的約束，而我想讓“父級”靈活。

或添加overflow-x：隱藏隱藏滾動條，但將“子級”保留下來。

更新：顯示：父級上的flex可以解決常規寬度（即圖像）的問題，但不能解決帶有空白：nowrap的文本設置的寬度問題。

謝謝。

Firefox：

鉻：

Answer 1

您可以使用@-moz-document編寫某些樣式，這些樣式只能由firefox識別。 請參見： https : //developer.mozilla.org/en-US/docs/Web/CSS/@document 。

希望對您有所幫助。