I had a list of LIs positioned relatively and child elements positioned absolutely (fairly typical). However, one of the absolutely positioned elements had too much content and overflowed out of the parent LI. I didn’t want to hide the text, I wanted the parent LI to grow to allow enough space.
To solve this, I gave the child a position of “relative” and set “top” and “left” appropriately. This would let the LI grow taller when this child grew, while leaving the other LIs untouched.
I was wondering if anyone else has solved this problem in other/better ways. If not, I hope this helps. Thanks.
Why are you using absolute positioning? Absolute positioning removes the element from the flow of the document, which is not ideal if that element has a relationship with the other elements around it, which it seems like it does in your case.
Absolute positioning has been my goto for positioning elements (almost arbitrarily) within a container. Are you saying it would be better to position elements using “relative” and only use “absolute” positioning when absolutely necessary? Because, when I modify my codepen to use relative positioning for most elements, the parent LI allocates enough height for all of the relatively positioned elements (making it much larger than needed).