Flexbox children shrink up to a certain point (but don't expand if they don't need to)

Question

I\'m a having a bit of an issue here. I have a flexbox container with children of different sizes. Based on quantity and their content children might overflow the parent.

Answer 1

Temani Afif's solution solves the problem of ensuring that a text element will not shrink below the specified width unless its intrinsic width is already below that width (in which case it uses its intrinsic width as the rendered width). But it does not work unless the sum of the specified widths of all the child elements exceeds the container's width.

So I tried giving each outer elements a flex-grow parameter, so that they would grow above their specified width, if the container had room. But I also give the outer elements a maximum width set to their intrinsic maximum content width, so they would never grow beyond the actual size of the text. Thus I added the following styles to the wrapping div.

 flex: 1 1 auto;
 max-width: max-content;

With that tweak I believe it solves the entire problem. The elements expand fully if there is room in the container. As we add more elements the longer elements start to shrink. But they never shrink below their specified width, so the container overflows once all inserted elements have shrunk down to that width. But elements that started with a shorter width never flex at all.

I have added an example below.

.container {
  width: 340px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
  padding: 5px;
}

.container>div {
  background-color: orange;
  padding: 5px;
  flex: 1 1 auto;
  width: 80px;
  max-width: max-content;
}

.container>div>div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

.container>div:not(:last-child) {
  margin-right: 5px;
}

When the items fit they expand to their intrinsic length

  

    
Medium length
  
  

    
Tiny
  
  

    
Longer text element
  

When the container limit is reached the longer elements start shrinking

  

    
Medium length
  
  

    
Tiny
  
  

    
Longer text element
  
  

    
Filler
  

Adding more elements...

  

    
Medium length
  
  

    
Tiny
  
  

    
Longer text element
  
  

    
Filler
  
  

    
Filler
  

When there is no room it overflows
 The tiny element stays at its intrinsic width, but the bigger elements stop shrinking at the specified width

  

    
Medium length
  
  

    
Tiny
  
  

    
Longer text element
  
  

    
Filler
  
  

    
Filler
  
  

    
Filler