Квадратный гибкий элемент внутри контейнера с динамом c высота / ширина

Question

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

Изображения работают в соответствии с моими пожеланиями, но последний элемент, входная оболочка, не ' t.

Я бы хотел, чтобы последний элемент (оболочка входного файла) использовал всю высоту контейнера и имел форму квадрата.

Я пробовал несколько стилей, но я я не могу остановить следующие проблемы:

• Когда в контейнере остается много места, последний элемент становится слишком широким
• Когда контейнер заполнен, последний элемент стать слишком узким

.container {
        resize: both;
        width:1000px;
        height:200px;
        border:1px solid #000;

        display:flex;
        overflow-x:auto;
        overflow-y:hidden;
        white-space: nowrap;
        align-items:flex-start;
        padding:0.25rem 0;
      }

      .container>* {
        border:1px solid #000;

        max-width:200px;
        max-height:100%;
        width: auto;
        height: auto;
      }

      .container>*:not(:first-child) {
        margin-left:1rem;
      }

      .inputfilewrapper {
        display: inline-block;
        flex:1 0 0px;
        height:100%;
      }

      .inputfile {
        display: none;
      }

      .inputfile + label {
        display: block;
        height: 100%;
      }

<div class="container">
  <img src="https://picsum.photos/200/300">
  <img src="https://picsum.photos/300/200">
  <img src="https://picsum.photos/1000/1000">
  <img src="https://picsum.photos/200/300">
  <img src="https://picsum.photos/200/300">
  <div class="inputfilewrapper">
    <input type="file" id="random123" class="inputfile">
    <label for="random123">[+]</label>
  </div>
</div>

Желаемый результат показан красным на следующем рисунке над актуальной версией: