I have a flex container with two elements, I'm trying to shrink the first element to its min-width before shrinking the second.The caveat is that I want the first element to not grow beyond its content size.
I know there are a lot of similar question here on SO, but none of them satisfy my last requirement. I've fiddled quite a lot with flex-grow, flex-shrink and flex-basis, but couldn't get what I wanted. The closest I found is:
.p { display: flex}.label { flex-basis: 50px; flex-grow: 1; flex-shrink: 0;}.values { flex-grow: 0; flex-shrink: 1;}<div class="p"><div class="label"> My long label that should shrink first with an ellipsis</div><div class="values"> My values which I do not want to shrink before the label shrunk to its min-width, and that should be next to the label without a big gap between the two</div></div>It does make label shrink first, but the problem is that it makes it grow as much as possible if there is space, creating a big gap between label and values.
Any idea how I could make it work?