Hi! I have a container
div, let's call it "port." Inside port are multiple
divs (let's call them "items") that overflow past what the size of their parent
div (port) is. When one of the items is clicked, I want to shift its right edge to be at the same location that the right edge of port is. However, I also want all the other items to shift accordingly when the clicked item moves, so I can't use
position: absolute for the items.
If that text description doesn't make sense to you, maybe these visuals will help:
Normally the items overflow past the edge of the port.
When item1 is clicked, it "snaps" to be fully in the port (AKA its right edge becomes the same as port's right edge). All other sibling items in front of/behind it adjust accordingly.
What is the simplest way to do this?
I've thought about using absolute positioning, flexboxes, and other stuff but nothing seems to work. I'm a bit stumped on how to do this. Thank you very much in advance!