I'm working on a layout where I have a vertical flex container of screen height that contains a dynamic number of cards. Each card should take up the full width of the container and has an image that should shrink if the vertical parent container overflows in the Y direction. To achieve this, I'm using overflow: hidden on both the container and the card.
* { margin: 0; padding: 0; box-sizing: border-box;}.container { display: flex; height: 100dvh; overflow-y: hidden; resize: vertical; /* For example purpose */}.sidebar { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.5rem; height: 100%; width: fit-content; max-width: 9rem; padding: 0.5rem; border: 1px solid black; overflow-y: hidden; z-index: 0;}.card { position: relative; display: flex; flex-direction: column; overflow: hidden; width: 100%; z-index: 0; border: 1px solid black; padding: 0.25rem;}.card .image-container { display: flex; flex-shrink: 1; width: 100%; overflow: hidden;}.card .image-container img { width: 100%; object-fit: contain;}.card p { flex: 0 0 auto;}.card .message { position: absolute; bottom: 25%; left: 90%; padding: 0.25rem 0.5rem; border-radius: 20%; background-color: red; z-index: 50;}<div class="container"><aside class="sidebar"><div class="card"><!-- image container is required for actual use-case --><div class="image-container"><img src="https://picsum.photos/200" alt="200x200 image" /></div><p>Some Text</p><div class="message">Hello</div></div></aside></div>The issue arises when I try to add an absolutely positioned div (a .message element) inside each card. This element needs to be positioned partially outside the card, but it's getting hidden due to the overflow: hidden property on the card.
I am not able to think of how to get a solution for this particular requirement.