尽管flex-basis:flexbox项的宽度不相等:0 [英] Flexbox items do not have equal widths despite flex-basis: 0

问题描述

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

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.

请问有人可以帮忙吗?

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>

推荐答案

如果您未指定宽度，则flex容器只是在执行它的工作，并按照指定的方式增长.一种解决方法是设置min-width以便没有隐式宽度.

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.

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

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

如果同时为元素设置了flex-basis(非auto)和width(或flex-direction:column的高度)，则flex-basis具有优先权.

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>

这篇关于尽管flex-basis:flexbox项的宽度不相等:0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！