Как создать flexbox с фиксированным и гибким элементом, который автоматически оборачивается?

Question

Я пытаюсь создать элемент гибкой карты, который имеет:

• 1 элемент фиксированной ширины (image-container)
• 1 гибкий элемент (text-container)

Мне нужен элемент text-container для автоматического переноса, когда он больше не может сжиматься (когда начинает меняться высота контейнера)

<div class="card">
  <div class="image-container">
    <h2>image here</h2>
  </div>

  <div class="text-container">
    <h2>Title text</h2>
    <ul>
      <li>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Dolor fuga inventore doloribus ipsam tempore? 
        Culpa temporibus ut et. Repellat. Ad natus ut illum aspernatur?
      </li>
      <li>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Dolor fuga inventore doloribus ipsam tempore? 
        Culpa temporibus ut et. Repellat. Ad natus ut illum aspernatur?
      </li>
    </ul>
  </div>
</div>

Вот рабочий пример Codepen:

https://codepen.io/anon/pen/wLXEwr?editors=1100

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