求助：Flexbox布局实现等高列与长文本滚动的问题

当前效果：

我尝试套用Stack Overflow上的相关方案解决问题，但要么场景不符，要么理解不到位，没达到预期效果。以下是我写的代码：

HTML代码 #

<div class="container">
  <div class="grid">
    <div class="left_flex">
      <div class="img"><img src="https://dummyimage.com/250x350/ddd/000000.png" /></div>
      <div class="a_link"><a href="#" target="_blank">a link</a></div>
    </div>
    <div class="right_flex">
      <div class="short_text">Short text</div>
      <div class="long_text">
        Lorem ipsum (...)
      </div>
    </div>
  </div>
</div>

CSS代码 #

.container {
  width: 600px;
}
.grid {
  display: flex;
  flex-flow: row nowrap;
  align-content: stretch;
  overflow: auto;
}
.left_flex,
.right_flex {
  flex-flow: column nowrap;
  display: flex;
  align-content: stretch;
}
.right_flex {
  overflow: auto;
}
.long_text {
  min-height: min-content;
}
.img img {
  max-width: 250px;
}

我省略了样式细节和用于延长段落的代码，完整代码包含这些部分。

需求说明 #

我要做一个用户填写表单：

• .img容器放置尺寸、比例可变但宽度不超过250px的图片
• 表单右侧高度需适配左侧图片区域的高度，整体容器宽度固定为600px
• .long_text容器要填充右侧剩余空间，让.left_flex和.right_flex保持等高
• 当.long_text内容过多时，显示滚动条允许内容滚动

预期效果：

内容的提问来源于stack exchange，提问作者ChaosHead