I have a div called v-chip-group that adjusts its height based on the content. It increases when more content is added and decreases when there is less content.
My goal is to make sure that the height only increases, and if items are removed, the last updated height remains unchanged.
For instance:
The height of the div is 40px with 3 shapes added: https://i.sstatic.net/wAico.png
If I add more shapes, the height goes up to 72px: https://i.sstatic.net/nxkQF.png
If I delete some shapes and they fit on one line, the div reverts back to 40px: https://i.sstatic.net/Cz66f.png
I want to maintain the highest height value (in this case, 72px) even if the shapes can be displayed on a single line.
I am using VueJS and have tried flex-shrink: 0 / flex-grow: 1 without success. I also attempted to use a 'ref' on my v-chip-group element and update its value in real-time but couldn't access the clientHeight property.
If anyone has a suggestion on how to achieve this, I would greatly appreciate it! Thank you!