Flexbox Items Do Not Have Equal Widths Despite Flex-basis: 0

I have 4 columns in flexbox, which I want to be of equal width. The one with overflow: hidden takes more place than others, and I can't fix it. It seems to me, then I have the same

Solution 1:

If you don't specify a width the flex container is just doing it's job and growing as specified. A solution to this is to set the min-width so there is no implicit width.

Additionally here is some valuable information on flex-basis: MDN

In case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.

.items {
    display: flex;
    justify-content: space-between;
}

.item {
    flex: 1 0 0;
    border: 1px solid #333;
    background: #fde669;
    min-width: 0;
}

.item-title {
    font-size: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="items">
  <div class="item">
    <div class="item-title">Title 1</div>
  </div>
  <div class="item">
    <div class="item-title">Title 2</div>
  </div>
  <div class="item">
    <div class="item-title">Some very long title</div>
  </div>
  <div class="item">
    <div class="item-title">Title 3</div>
  </div>  
</div>