Flex-коробка с оболочкой внутри другой коробки Flex

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

Я думал, что смогу добиться этого с помощью гибкой коробки, но результат ошибочен. Ниже приведен фрагмент кода:

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

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