Shrinkwrap - горизонтальная автоматическая сетка с переменной высотой

Question

Я пытаюсь получить следующий макет для компонента на моей странице:

Мои ограничения:

• Левая область содержимого будет содержать предоставленный пользователем текст и, следовательно, имеет неизвестную высоту.
• Правый раздел содержит переменное количество элементов, которые должны переноситься на несколько столбцов, когда они будут выходить за пределы левой высоты.содержимое, если оно ограничено одним столбцом.
• Когда элементы правого раздела переносятся, полные столбцы должны равняться высоте левого раздела содержимого.
• Содержимое каждого элемента в правом разделебудет иметь фиксированную, равную высоту;тем не менее, сами предметы могут иметь различную высоту, особенно для выполнения предыдущего требования.
• Каждый предмет должен всегда иметь такую ​​же высоту, как и любой другой предмет в правом разделе.
• Левая часть будет иметь максимальную ширину.
• Внешняя оболочка должна быть сжата, чтобы весь компонент мог быть центрирован на странице.

Казалось бы логичным использовать flexbox длявнешняя обертка и сетка для мелких предметов на правой стороне. У меня почти все работает здесь. К сожалению, поведение сетки очень непредсказуемо.В зависимости от ширины области просмотра, иногда она правильно оборачивается, иногда нет.Иногда это переполняет внешнюю обертку.И часто это занимает больше места, чем нужно.

Вот код, который у меня есть:

HTML:

<div class="outer">
  <div class="content">
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke. Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke. 
  </div>
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

CSS:

html, body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer {
  border: 5px solid black;
  display: flex;
  max-width: 100%;
  flex: 0 1 auto;
  img {
    flex: 0 0 auto;
  }
}
.content {
  padding: 1rem;
}
.grid {
  writing-mode: vertical-lr;
  padding: 1rem;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  grid-auto-rows: 60px;
}
.item {
  writing-mode: horizontal-tb;
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  &::after {
    content: "#";
    color: white;
    font-family: sans-serif;
    font-size: 2rem;
    padding: .5em;
    display: block;
  }
}

Как мне добиться этого макета?