Struggling to get it right, here's my query:
This is how my DOM looks:
<div id="content">
<div class="listitem">
<img class="thumbnail"/>
<div class="option_icon"></div>
</div>
<div class="listitem">
<img class="thumbnail"/>
<div class="option_icon"></div>
</div>
</div>
CSS:
#content {
position: absolute;
overflow: auto;
width: 100vw;
top: var(--header-height);
left:0;
bottom: var(--footer-height);
display: flex;
flex-direction: row;
place-content: start;
}
.listitem {
width: var(--image-size);
height: var(--image-size);
display: flex;
flex-direction: row;
}
.thumbnail {
align-self: flex-start;
height: var(--image-size);
width: var(--image-size);
}
.option_icon {
height: calc(var(--icon-size)*0.75);
width: calc(var(--icon-size)*0.75);
background-color: grey;
mask-image: url("icons/options.svg");
position: absolute;
align-self: flex-end;
z-index: 999;
}
I'm aiming for the option icon to stick to the bottom right of each thumbnail image, creating a gallery view effect with square pictures.
It works in the first column, but as the options-div isn't affected by the flex-grid of listitems due to its absolute positioning, all icons end up stacked in the first column instead of spreading out with their siblings. I'll include an image to illustrate the current situation.
How do I keep the red option icons aligned with their siblings while being correctly spread out?