Firefox scrollbar shrinks flex children when using align-items: flex-start

yotube
0

Issue

The following example renders correctly in Chrome, but in Firefox the 'inner' container does not expand to accomodate the scrollbar and creates a horizontal scroll bar instead. Is it a bug or how to work around this issue?



.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>




Solution

Adding the line

scrollbar-gutter: stable

should solve the problem



.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>





Answered By - Gurgolo
Tags

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top