尽管 flex-basis: 0 [重复]，但 Flexbox 项目的宽度不相等答案

【问题标题】：Flexbox items do not have equal widths despite flex-basis: 0 [duplicate]尽管 flex-basis: 0 [重复]，但 Flexbox 项目的宽度不相等
【发布时间】：2019-07-07 23:10:22
【问题描述】：

我在 flexbox 中有 4 列，我希望它们的宽度相等。 overflow: hidden 的位置比其他位置多，我无法修复它。

在我看来，然后我遇到了与这篇文章中所述相同的问题：flexbox and overflow hidden not working properly

但答案对我没有帮助，我无法弄清楚我的代码有什么问题。我想我想念一些东西。

有人可以帮忙吗？

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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

如果您不指定宽度，则 flex 容器只是在完成它的工作并按照指定的方式增长。解决这个问题的方法是设置min-width，这样就没有隐式宽度。

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

如果一个元素同时设置了 flex-basis（auto 除外）和 width（或 flex-direction: column 的高度），则 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>

【讨论】：