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.
This reply has been reported for inappropriate content.
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).