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

Question

我在flexbox中有4列，我想具有相等的宽度。一个带有overflow: hidden的人比其他占用的位置更多，我无法修复它。

在我看来，我有与本文中所述的相同的问题：flexbox和溢出隐藏不正常

但是答案没有帮助我，我不知道我的代码有什么问题。我想我想念的东西。

有人可以帮忙吗？

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>

Answer 1

如果您没有指定宽度，则Flex容器只是在做它的工作并按照指定的方式生长。解决方案是设置min-width，因此没有隐式宽度。

此外，这里还有一些有关flex-basis的有价值的信息：MDN

如果为元素设置了flex-basis（自动）和宽度（或柔性方向上的高度），则flex-basis具有优先级。

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