I am facing an issue with a scrolling <div> that contains multiple items. These items have ellipsis set for overflow and are placed in an absolutely positioned container.
In Chrome and Edge, the items expand fully as there are no width restrictions. However, in Firefox, I encounter a problem where the items do not expand properly:
https://i.sstatic.net/bjBuz.png
Despite trying common solutions like setting the flex child's min-width or min-height to a fixed value, it does not resolve the issue in my scenario (refer to the code snippet).
The presence of the scrollbar seems to be causing the problem. When only two items are displayed and there is no scrollbar, the width remains unchanged.
Is there a workaround for this situation?
.content {
position: absolute;
top: 20px;
left: 20px;
height: 60px;
display: flex;
flex-flow: column;
border: 2px solid red;
}
.scroller {
flex-shrink: 1;
overflow-y: auto;
background-color: gold;
min-width: 0;
min-height: 0;
}
.item {
text-overflow: ellipsis;
overflow: hidden;
}<div class="content">
<div class="scroller">
<div class="item">a12345</div>
<div class="item">b12345</div>
<div class="item">c12345</div>
<div class="item">d12345</div>
</div>
</div>