flex元素中的最小宽度设置为最小内容不起作用

Question

我有一个可以容纳无限数量元素的 flex 容器。

每个元素都分为 3 个部分。第一部分和第三部分应该适合他们的内容，并且不应该被缩小或隐藏，中间部分包含一个可以缩小到最少 10 个字符的文本。

我需要为每个元素显示尽可能多的信息。如果所有元素都适合容器，则应完全显示文本，如果不适合，则元素应开始缩小文本，以允许显示尽可能多的元素，一旦无法缩小文本，因为它已达到其最小值那么最新的元素（更多在右边）应该溢出父元素并被隐藏。 我正在使用如下的 flexbox。

    <div class="tabs-container">
      <div class="tab">
        <div class="tab-element-1">
          ele1
        </div>
        <div class="tab-element-2">
          Text
        </div>
        <div class="tab-element-3">
          tab element 3
        </div>
      </div>
      <div class="tab">
        <div class="tab-element-1">
          ele1
        </div>
        <div class="tab-element-2">
          Some Very Very Very Long Text
        </div>
        <div class="tab-element-3">
          123456789 123456789 123456789
        </div>
      </div>
      <div class="tab">
        <div class="tab-element-1">
          ele1
        </div>
        <div class="tab-element-2">
          Really Very Very Very Very long long text even longer
        </div>
        <div class="tab-element-3">
          tab element 3
        </div>
      </div>
    </div>

.tab {
  display: flex;
  background-color: lightskyblue;
  flex-shrink: 1;
  flex-grow: 0;
  min-width: 12rem;
/*   min-width: min-content; */
}

.tab-element-1 {
  margin-right: 3px;
  background-color: lightblue;
  flex: none;
}

.tab-element-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 10ch;
  flex-shrink: 1;
}

.tab-element-3 {
  margin-left: 3px;
  background-color: lightblue;
  flex: none;
}

我认为问题在于元素中的 min-width 设置为固定值，但我找不到要设置的正确值，我尝试使用 min-content 但不起作用。 对于每个元素，最小宽度应等于： 左边部分内容的大小+中间部分内容的最小宽度（10ch）+右边部分内容的大小。 但是我不知道如何用 css 来完成。

在这里编写代码：https://codepen.io/alejandro-palmer/pen/eYvZRrJ

在给定的示例中，第二个元素开始收缩，并且它的第三部分溢出并被隐藏，即使第三个元素的文本可以进一步收缩。

Answer 1

如果可以取出一层HTML，这比嵌套flexbox可行多了：

<div class="tabs-container">
    <div class="tab-element-1">
      ele1
    </div>
    <div class="tab-element-2">
      Text
    </div>
    <div class="tab-element-3">
      tab element 3
    </div>
    
    <div class="tab-element-1">
      ele1
    </div>
    <div class="tab-element-2">
      Some Very Very Very Long Text
    </div>
    <div class="tab-element-3">
      123456789 123456789 123456789  
    </div>
    
    <div class="tab-element-1">
      ele1
    </div>
    <div class="tab-element-2">
      Really Very Very Very Very long long text even longer
    </div>
    <div class="tab-element-3">
      tab element 3
    </div>
</div>

CSS：

.tabs-container {
  display: flex;
  overflow: hidden;
  white-space: nowrap; 
}

.tab-element-1 {
  margin-right: 3px;
  background-color: lightblue;
  flex: 0 0 auto;
}

.tab-element-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 0 10ch;
  background-color: lightskyblue;
}

.tab-element-3 {
  margin-left: 3px;
  background-color: lightblue;
  flex: 0 0 auto;
}

.tab-element-3:not(:last-child) {margin-right:10px;}

如果无法取出图层，请改用此 CSS：

.tabs-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 1fr);
}

.tab {
  display: flex;
  overflow: hidden;
  white-space: nowrap; 
}

.tab-element-1 {
  margin-right: 3px;
  background-color: lightblue;
  flex: 0 0 auto;
}

.tab-element-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 0 10ch;
  background-color: lightskyblue;
}

.tab-element-3 {
  margin-left: 3px;
  background-color: lightblue;
  flex: 0 0 auto;
}

.tab-element-3:not(:last-child) {margin-right:10px;}