Min-width set to min-content in flex elements not working

Question

I have a flex container that can hold an indefinite number of elements.

Every element is divided in 3 parts. The first and third parts should fit their content and should never be shrunk or hidden, the middle part it holds a text that can be shrunk until a min of 10 characters.

I need to show as much information as possible for every element. if all elements fit in the container the text should be shown entirely, if they don't fit, the elements should start shrinking the text allowing to show as many elements as possible, once is not possible to shrink the text because it reached its minimum then the latest elements (more to the right) should overflow the parent and the be hidden. I'm using flexbox like follows.

    <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;
}

I think the problem is with the min-width set to a fixed value in the elements, but I cannot find the proper value to set, I tried with min-content but is not working. For every element, the min-width should be equal to: the size of the left part content + min width of middle part's content (10ch) + the size of the right part content. But I don't know how to accomplished this with css.

codepen here: https://codepen.io/alejandro-palmer/pen/eYvZRrJ

In the given example the second element starts shrinking and its third part overflows and is hidden, even when the text of the third element can be shrunk even more.

Answer 1

If you can take out a layer of HTML, this is much more feasible than nesting flexboxes:

<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;}

If you can't take out a layer, use this CSS instead:

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