Flex包装盒内有另一个Flex盒子

Question

我有一个垂直标题布局，其中左边是内容容器，右边是带有垂直标题的标题容器。我希望当标题很长时，垂直标题会换行到下一条垂直线。

我以为我可以用弹性盒子来实现这一点，但结果是错误的。以下代码段：

＆＃13;

＆＃13;

.flex{
  display:  flex;
  background-color:  red;
  width:  100%;
  height:  400px;
  justify-content:  flex-end;
}
.ctt{
  background-color:  yellow;
}
h3{
  max-height:  80%;
  display:  flex;
  flex-direction:  column;
  flex-wrap:  wrap;
  background:blue;
  align-self:  flex-end;
 }
h3 > span{
  color:  white;
  display:  block;
  white-space: pre;
  }

＆＃13;

<div class="flex">
  <div class="ctt">
    some content
    </div>
  <h3 class="ttl">
    <span>A</span>
    <span> </span>
    <span>V</span>
    <span>e</span>
    <span>r</span>
    <span>y</span>
    <span> </span>
    <span>V</span>
    <span>e</span>
    <span>r</span>
    <span>y</span>
    <span> </span>
    <span>L</span>
    <span>o</span>
    <span>n</span>
    <span>g</span>
    <span> </span>
    <span>T</span>
    <span>i</span>
    <span>t</span>
    <span>l</span>
    <span>e</span>
    </h3>
  </div>

＆＃13;

＆＃13;

＆＃13;

正如您在运行代码段时所看到的那样，换行确实发生了，但您无法看到它。我需要标题弹性项目（h3）在发生换行时展开，这样你就可以看到标题的其余部分了。

此外，在Chrome中测试，标题甚至不包装。但我认为这是Chrome的问题，而不是代码的问题。

我不介意使用弹性盒以外的方法，只要我得到所需的结果。

有关布局的更多信息：
标题应该是其容器的80％高 它应该与底部对齐。
它应该与右边对齐。
当80％不能再容纳它时，它应该包裹到下一条垂直线（右侧） 当这种包裹发生时，显然宽度会增加，内容（黄色框）应该被推到左边。

我觉得这可以用css实现，所以尽可能避免使用javascript。

亲切的问候。

使用图表进行编辑：

我发现自己很难解释事情。希望这两个图有所帮助。我希望。

无论如何，第一张图是我从Firefox获得的结果，Chrome甚至没有包装文本。

图2是我正在寻找的结果。到目前为止，包装是通过柔性包装实现的，但是当这种包装发生时它不会推出容器。