Отзывчивая строка меню с динамическим контентом в чистом CSS

Question

Я пытаюсь добиться следующего: горизонтальная полоса, состоящая из нескольких изображений, например, шириной 300 пикселей.

Пока достаточно места (viewport> number_of_pictures * width), каждое изображение имеет свой естественный размер(и всегда правильное соотношение сторон), но они никогда не будут расти.

Если места меньше, изображения будут сжиматься до минимальной ширины 100 пикселей, а затем будет прокручиваться полоса.

HTML:

<div class="flex-container">
  <img src="https://via.placeholder.com/300x300.png"/>
  <img src="https://via.placeholder.com/300x300.png"/>
  <img src="https://via.placeholder.com/300x300.png"/>
</div>

CSS:

.flex-container {
  display: flex;
  width: 100vw;
}

img {
  flex: 0 1 auto;
  width: 100%;
  min-width: 100px;
}

См. Мою ручку для этого основного поведения: https://codepen.io/urac/pen/eQXXMj (используйте выпадающее меню на панелях кода, чтобы увидеть скомпилированный HTML / CSS, если вы не знакомы с мопсом / стилусом)

То, что я не могу заставить работать ни с flexbox, ни с сеткой, - это непротиворечивое поведение, когда слишком мало вертикального пространства.Изображения должны снова уменьшаться до минимальной высоты 100px.

Я ищу чистое решение CSS, если это возможно.Вычисление размеров в Javascript может быть возможным, но довольно сложно, потому что контент динамический, поэтому ни число, ни высота / ширина / соотношение сторон изображений (или, возможно, div) не известны заранее.

Для бонусных баллов: Aвертикальный вариант.
Я еще больше застрял на этом.(https://codepen.io/urac/pen/QJPPez)

[Цель состоит в том, чтобы внизу в книжных видовых экранах была удобная отзывчивая строка меню, а в пейзажных - слева. Не входит в этот вопрос, мои медиазапросы работают нормально.]