Гибкая строка CSS со вторым элементом, прокручивающимся вертикально, если он больше, чем первый элемент

У меня есть гибкая строка из двух элементов: первый элемент имеет некоторый контент (изображение, тексты, расположенные вертикально), а второй элемент может иметь много текстового контента (списки). Теперь я хочу, чтобы второй элемент прокручивался вертикально, когда он больше первого.

См. Этот простой пример:

.container{
  border: 1px solid black;
  display: flex;
}

.box { width: 300px; color:#fff; }
.box1 { background:blue; height: 100px }
.box2 { background:red; overflow-y: auto; }

<div class = "container">
  <div class = "box box1">Item with some height</div>
  <div class = "box box2">
    Some details (should scroll vertically if larger than left box)
    <br/> content1<br/> content2<br/> content3
    <br/> content4<br/> content5<br/> content6
    <br/> content7<br/> content8
  </div>
</div>

Прокрутка работает только в том случае, если я установил контейнер на фиксированную высоту, но я действительно хочу избежать этого, потому что высота должна определяться первым элементом гибкой строки. Как я могу это сделать?