Stick HTML element to bottom of container, without ever clipping its top

I have a situation where I have a container div element, and an inner element (in this case a picture) within this container. I would like the following to happen:

• If the container div is taller than the inner element, the inner element should be placed at the bottom of the container.
• If the container div is smaller than the inner element should instead be placed at the top of the container and the bottom is clipped.

The main difficult I am having is that the inner element's height is variable. Ideally, I would like to have a CSS-only solution (it is significantly easier if using JavaScript of course).

Partial Solution

In cases where the inner element height is known and fixed, I have managed to get the desired outcome with the following (CodePen link):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
  }
}

<!-- language: lang-html -->

<div class="container">
  <div class="inner">
  </div>
</div>

<!-- end snippet -->

I don't know if this can provide a useful starting point for any solutions. This could be quite easily fixed by being access the current element's height in the @container queries.

Simply use a pseudo element and set flex-direction: column for .container:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: clip;
}

.container::before {
  content: '';
}

The pseudo-element ::before has a height of 0 (since we didn't specify any) so it is invisible to users. If it had some height, however, our layout (without display: flex) would look like this:

┌────────────────────────┐
│        ::before        │
├──────┬─────────────────┤
│      │                 │
│.inner│                 │
│      │                 │
├──────┘                 │
│                        │
└────────────────────────┘

The combo of display: flex (make it a flexbox), flex-direction: column (place elements vertically) and justify-content: space-between (maximum space between elements) makes the two elements touch two opposite sides:

┌────────────────────────┐
│        ::before        │
├────────────────────────┤
│                        │
├──────┐                 │
│      │                 │
│.inner│                 │
│      │                 │
└──────┴─────────────────┘

If .container is not as high as the sum of its children's heights, it will first try to shrink its children. Since ::before never had any height to begin with, and .inner has already fit its content, the space between them collapse to 0 and .inner will be clip-ped:

┌────────────────────────┐
│        ::before        │
├──────┬─────────────────┤
│      │                 │
│.inner│                 │
└──────┴─────────────────┘

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-js -->

const container = document.querySelector('.container');
const input = document.querySelector('input');

input.addEventListener('input', function() {
  container.style.height = this.value + 'px';
});

<!-- language: lang-css -->

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 30px 0;
  background-color: red;
  overflow: clip;
  height: 200px;
}

.container::before {
  content: '';
}

.inner {
  background-image: linear-gradient(green, yellow);
  width: 200px;
}

<!-- language: lang-html -->

<input type="range" min="100" max="1000" step="1" value="200">

<div class="container">
  <div class="inner option1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum purus nec interdum tristique. Maecenas eleifend, libero nec varius cursus, lacus eros elementum odio, eget convallis risus erat ut velit. Pellentesque ut ex lobortis, hendrerit ipsum
    ut, pretium dui. Morbi porta viverra eros eget malesuada. Praesent sed metus eu dui fermentum sagittis. Aliquam blandit ultricies hendrerit. Integer dignissim enim est, id vestibulum ante ultricies eu. Cras at est quis sem luctus finibus. Mauris in
    maximus turpis.
  </div>
</div>

<!-- end snippet -->