Despite providing overflow: hidden the following code causes a horizontal scroll bar:
.container { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;}.item { background-color: orange; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}<div class="container"><div class="item">short text</div><div class="item">long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </div></div>I need the align-items: flex-start on the container, because I want the orange items to be as small as the text inside and not grow to the whole available space.
I can not set a fixed width on the container, because I want it to fill its container.
Can I prevent the item with long text from causing the horizontal scroll bar?
