Can I position an element at the bottom right corner of a flexible image with pure CSS?

The overlay image in the example below is supposed to stay at the same location relative to the larger image independent of the size of the container. I added 2 examples below of the "img_overlay" CSS module, one where it is inside a portrait test container (green), and another inside a green landscape container. It works fine for portrait, but not for landscape, because the "img_overlay__container" (red) extends to the whole width of the parent container instead of being limited to the width of the black image. If the red container would be as wide as the black image then everything would be OK. I can make it work for landscape too with a simple inline-block, but then it breaks for portrait. Mind that the image should be flexible, expanding and shrinking according to the available space, up to its natural size, so no fixed size solutions please. And the overlay image should retain its size ratio in relation to the black image (25% of the black image), so that it looks the same independent of screen size. I should add that I am testing on Chrome Version 59.0.3071.115 (Official Build) (64-bit)

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Portrait container (300x200): <strong>works</strong>, this is how it should always look at any container size.
<div class="test test--1">
    <div class="img_overlay">
        <div class="img_overlay__container">
            <img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
            <img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
        </div>
    </div>
</div>
<br> Landscape container (200x300): <strong>does not work</strong>, because the overlay is not next to the image.
<div class="test test--2">
    <div class="img_overlay">
        <div class="img_overlay__container">
            <img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
            <img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
        </div>
    </div>
</div>
<br> Large container (500x500): <strong>works</strong>, the images are not enlarged above their natural size.
<div class="test test--3">
    <div class="img_overlay">
        <div class="img_overlay__container">
            <img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
            <img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
        </div>
    </div>
</div>

CSS

body {
	margin-bottom: 100vh;
}

.img_overlay {
    display: inline-flex;
    max-height: 100%;
}

.img_overlay__container {
    position: relative;
    background-color: rgb(255, 0, 0);
}

.img_overlay__img {
    border-radius: 50%;
    max-height: 100%;
    max-width: 100%;
}

.img_overlay__overlay {
    border-radius: 50%;
    width: 25%;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.test {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0, 255, 0);
    border: 3px solid rgb(0, 255, 0);
}

.test--1 {
    width: 200px;
    height: 300px;
}

.test--2 {
    width: 300px;
    height: 200px;
}

.test--3 {
    width: 500px;
    height: 500px;
}

JavaScript

$( ".test" ).resizable();