Flexbox items do not have equal widths despite flex-basis: 0 [duplicate]

问题

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 problem as stated in this post: flexbox and overflow hidden not working properly

But the answer did not help me, and I сan't figure out what is the problem with my code. I guess there is something I miss.

Could anyone help, please?

https://jsfiddle.net/f39gjnyv/1/

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

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

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

回答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>

来源：https://stackoverflow.com/questions/54681689/flexbox-items-do-not-have-equal-widths-despite-flex-basis-0

标签

html

css

flexbox