I was coding some css/html elements and met this problem. Been scouring over the web for potential solutions but none seem to address my problem.
I have a dynamic number of child elements needed to be fit into a parent element (flex container) for display. The child elements are sort of like badges where you can display information. On hover, the child element should expand with a width transition and reveal a utility icon for me to click on. All's fine here so far. The problem is when hovering, because the child will expand, if it is the 'last' child of the row in the flex, it will move to the next row and expand fully and i cannot reach the icon anymore.
Are there any solutions to this? I tried negative margin on the child to trick it to staying on the same row it is on but the child itself has its whole body cut off by the parent container as it overflows (it doesnt look very nice either).
I also tried forcing only n number of child elements per row (such as 2 children per row) but that only decreases the chances of the problem occuring, does not effectively remove it.
What I hope to look for is to keep the width transition and allow dynamic amount of children elements to populate into the parent container element and populate as many child element per row (hence the flex row wrap), whilst all the children being flushed to the left.
The '&' in the demo (below) is the icon; notice how some child elements at the end of some rows cannot be reached on hover as they break into the next row.
.flex-container { height: 100px; width: 400px; overflow-y: auto; display: flex; flex-flow: row wrap;}.flex-badge { display: inline-flex; margin-right: 0.5vw; margin-bottom: 0.5vh; background-color: lightblue; border: 1px solid black; cursor: pointer;}.hiddenIconTray { display: flex; overflow: hidden; width: 0; transition: width 0.5s;}.flex-badge:hover > .hiddenIconTray { width: 20px;}.flex-badge:hover { background-color: yellow;}<div class="flex-container"><div class="flex-badge">Lorem ipsum dolor sit amet<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">ipsum dolor sit<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem ipsum dolor sit amet<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">ipsum dolor sit amet<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem ipsum dolor sit amet<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem ipsum dolor sit amet<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem ipsum dolor sit amet<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">ipsum dolor<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">ipsum dolor<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem ipsum<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem ipsum dolor sit amet<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">ipsum dolor<div class="hiddenIconTray"> <i class="icon">&</i></div></div><div class="flex-badge">Lorem ipsum dolor sit amet<div class="hiddenIconTray"> <i class="icon">&</i></div></div></div>Thanks!