为弹性行内容提供100％的容器高度

Question

我有一个带有三个容器的行布局的flexbox容器。右边的容器有主要内容，我希望左侧容器的高度增长以匹配。

如果我将容器的align-items设置为stretch，它就能满足我的需求。但是，由于我无法控制的情况，我无法使用stretch。

我唯一真正的选择是center和flex-start。但是，使用这些.left设置，.mid和align-items的百分比高度似乎完全被忽略。

除了切换到align-items: stretch之外，有没有办法让左侧容器与父级的高度一起增长？

＆＃13;

＆＃13;

.container {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
  
.left {
  width: 34%;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}
  
.mid {
  width: 3%;
  height: 100%;
  border: 1px solid green;
}
  
.right {
  border: 1px solid blue;
}

＆＃13;

<div class="container">
  <div class="left">
    <div>Hello World!</div>
  </div>
  <div class="mid"></div>
  <div class="right">
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;