以下示例在 Chrome 中正確呈現，但在 Firefox 中，“內部”容器不會擴展以容納滾動條，而是創建一個水平滾動條。這是一個錯誤還是如何解決這個問題？
.line {
width: 300px;
border: 1px solid red;
}
.parent {
display: flex;
flex-direction: column;
height: 150px;
align-items: flex-start;
}
.inner {
flex-basis: 0;
flex-grow: 1;
overflow-y: auto;
}<div class="parent">
<div class="line">Line</div>
<div class="inner">
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
</div>
</div>uj5u.com熱心網友回復：
添加行
scrollbar-gutter: stable
應該解決問題
.line {
width: 300px;
border: 1px solid red;
}
.parent {
display: flex;
flex-direction: column;
height: 150px;
align-items: flex-start;
}
.inner {
flex-basis: 0;
flex-grow: 1;
overflow-y: auto;
scrollbar-gutter: stable
}<div class="parent">
<div class="line">Line</div>
<div class="inner">
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
<div class="line">Line</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/506929.html
上一篇：Firefox，xPath未評估