CSS Flex - растяжение или уменьшение изображения, чтобы заполнить оставшееся вертикальное пространство, но не ввести про ⇐ CSS

[Anonymous]

Я понимаю, что есть и другие подобные вопросы звука, но я не мог найти ни одного, чтобы помочь мне решить эту проблему. разрешено выращивать или сокращаться, чтобы заполнить доступное пространство.
Изображение составляет 50% от ширины просмотра и находится рядом с некоторым текстовым содержанием. Вертикальное пространство в видимом просмотре. Если изображение не может быть сделано достаточно высоким, чтобы заполнить оставшееся пространство, то раздел, в котором находится изображение, должно быть по крайней мере. В приведенном ниже примере этот раздел имеет фон Chartreuse. < /Li>
Изображение не должно расти так много, что вызывает прокрутку. Чтобы сделать так, чтобы раздел изображения (и само изображение) масштабируется, чтобы заполнить любое дополнительное вертикальное пространство, чтобы в виде просмотра не было пустого пробела. Прокрутка должна происходить только в том случае, если изображение не может быть сделано меньше, а изображение плюс остальная часть контента выше, чем в виде просмотра. Это элементы .inner , которые не имеют гибкого класса. Подход только к CSS? Я не могу получить изображение для изменения размера при изменении размера порта просмотра. Пожалуйста, смотрите jsfiddle для лучшего примера - https://jsfiddle.net/nt0785p3/.
Идея с этим состоит в том, что изображение должно быть таким же коротким, как текст рядом с ним, пока окно браузера не станет достаточно высокой, чтобы показать все разделы без прокрутки. После того, как окно браузера будет выше, чем все секции, изображение должно запустить вертикально (пропорционально), пока оно не сможет не стать выше (не становясь шире, чем 50% видовой точки). В этот момент зеленый фон, стоящий за разделом изображения, должен просто заполнить оставшееся вертикальное пространство.

Код: Выделить всё

  .outer {
border: 1px solid black;
height: 70vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
}

.inner.flexible {
flex: 1;
border: 1px dashed blue;
}

.inner {
padding: 8px;
border: 1px solid blue;
background-color: lightblue;
}

.inner.image-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
border: 1px solid orange;
background-color: chartreuse;
}

.inner.image-container > .image img {
max-width: 100%;
max-height: 100%;
min-width: 0;
min-height: 0;
object-fit: contain;
}

.inner.image-container > .content {
width: 50%;
}< /code>


The first section 1
The first section 2

The second section 1
The second section 2


[img]https://m.media-amazon.com/images/I/71QHUI7yiUL._AC_SX679_.jpg[/img]

Descriptive content goes here
The image should not shrink shorter than this
But the image might be taller than this if there is extra vertical space in the viewport.
Basically, the image should be at least as tall as this text but not so large that it causes scrolling. It should shrink, if necessary, to reduce the need for scrolling.


The third section
The fourth section
The fifth section
The sixth section
The seventh section

Подробнее здесь: https://stackoverflow.com/questions/796 ... t-not-intr