My current predicament involves having a container div element, with an inner element (in this case, a picture) nested within it. I have specific requirements for the positioning of the inner element based on the height relationship with the container:
- If the container div is taller than the inner element, the inner element should be aligned at the bottom of the container.
- If the container div is shorter than the inner element, it should instead align to the top of the container while the overflow is clipped at the bottom.
The main challenge lies in the variable height of the inner element, and I am seeking a CSS-only solution, although utilizing JavaScript would be simpler.
Partial Resolution
In instances where the inner element's height is fixed, I have achieved the desired result using the following code (CodePen link):
.container {
margin-top: 30px;
margin-bottom: 30px;
background-color: red;
overflow: clip;
height: 100vh;
position: relative;
container-type: size;
}
.inner {
background-image: linear-gradient(green, yellow);
height: 400px;
width: 200px;
}
.option1 {
position: absolute;
@container (max-height: 400px) {
top: 0;
}
@container (min-height: 400px) {
bottom: 0;
}
}<div class="container">
<div class="inner">
</div>
</div>I believe this could serve as a starting point for potential solutions. By accessing the current element's height in the @container queries, this issue could be easily resolved.