Is it possible to automatically "flex-shrink" only elements with large content? - css

Question

In a container with property display: flex; and a fixed size, is it possible to only shrink child elements which would take more than the space available if we evenly distributed it? It would be trivial knowing the content sizes beforehand but I'm looking for a solution which works for dynamic content without resorting to Javascript.
Here's an example:
.container {
display: flex;
width: 200px;
}
.item {
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Making it prettier -- unrelated to the question */
.container {
background-color: #cde;
padding: 5px;
}
.item {
margin: 0;
}
.item:not(:last-of-type) {
margin-right: 5px;
}
.item:nth-child(1) {
background-color: #dec;
}
.item:nth-child(2) {
background-color: #ced;
}
.item:nth-child(3) {
background-color: #dce;
}
<div class="container">
<p class="item">sm</p>
<p class="item">paragraph with large content</p>
<p class="item">another large content</p>
</div>
We can see that for the first item the letter m has been partly cut out (it shrunk). Given that this item is small enough (I'll properly define this below) I would want to prevent it from shrinking, like this:
The logic I'm aiming for is this: if we distribute the container width evenly between n child elements each one would have childWidth = parentWidth/n; then those that have width (based on its content) less than or equal to this value don't shrink while the other ones do shrink if necessary (it may be the case that the available space allows for all items to be fully displayed).
Is this possible with CSS only?

Answer 1

Ok, I have tested out my comment and it works! Hurray!
This works because it sets the minimum width of the element to the minimum width that can fit the content.
I have set it for only the first item, like you wanted:
.container {
display: flex;
width: 200px;
}
.item {
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Making it prettier -- unrelated to the question */
.container {
background-color: #cde;
padding: 5px;
}
.item {
margin: 0;
}
.item:not(:last-of-type) {
margin-right: 5px;
}
.item:nth-child(1) {
background-color: #dec;
min-width: min-content;
}
.item:nth-child(2) {
background-color: #ced;
}
.item:nth-child(3) {
background-color: #dce;
}
<div class="container">
<p class="item">sm</p>
<p class="item">paragraph with large content</p>
<p class="item">another large content</p>
</div>