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

Question

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

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

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

Как вы можете видеть при запуске фрагмент кода, обертка случилось, но вы не можете ее видеть. Мне нужен элемент гибкости title (h3) для расширения, когда происходит обертка, чтобы вы могли увидеть остальную часть заголовка.

Кроме того, тестирование в Chrome, название даже не обертывается. Но я думаю, что это проблема Chrome, а не проблема с кодом.

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

Дополнительная информация о планировке:
название должно быть 80% от его контейнера.
Он должен быть выровнен по низу.
Он должен быть выровнен вправо.
Он должен быть перенесен на следующую вертикальную линию (справа), когда 80% больше не могут ее уместить.
Когда этот перенос происходит, очевидно, ширина будет расти, а содержимое (желтый блок) должно быть сдвинуто влево.

Я чувствую, что это возможно с помощью css, поэтому избегайте javascript, если это возможно.

С уважением.

---

Редактировать с диаграммой:

Я считаю себя очень плохо объяснить вещи. Надеюсь, эти 2 диаграммы помогут. Я надеюсь.

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

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

Answer 1

.flex{height: auto;} 

ИЛИ

h3{align-self: auto;}