收缩包装水平包装的可变高度自动网格

Question

我正在尝试为页面上的组件实现以下布局：

我的限制：

• 左侧内容区域将包含用户提供的文本，因此高度未知。
• 右侧部分包含可变数量的项目，当它们限制在单个列中时，如果它们超出了左侧内容的高度，则应包装到多列中。
• 当右侧部分的内容换行时，整列应等于左侧内容部分的高度。
• 右侧部分中每个项目的内容将具有固定的，相等的高度；但是，允许物品本身的高度不同，特别是为了满足以前的要求。
• 每个项目的高度应始终与右侧部分中其他所有项目的高度相同。
• 左侧部分将具有最大宽度。
• 应将外包装纸收缩包装，以使整个组件可以在页面上居中。

将flexbox用于外部包装，将网格用于右侧的小物品似乎是合乎逻辑的。 I've almost got it working here.不幸的是，网格的行为是非常不可预测的。视视口的宽度而定，有时可以正确包装，有时则不能。有时，它会使外包装溢出。而且通常会占用更多的空间。

这是我到目前为止的代码：

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;
  }
}

如何实现这种布局？