具有包裝在另一個柔性盒內的柔性盒

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>

正如你可以看到運行的代碼片段時，包裹確實發生過，但你不能看到它。當包裝發生時，我需要標題彈性項目（h3）展開，以便您可以看到標題的其餘部分。

此外，在Chrome中測試，標題甚至不包裝。但我認爲這是Chrome的問題，而不是代碼的問題。

我不介意使用Flex框以外的方法，只要我得到想要的結果。

一些關於佈局的信息：
標題應該是它的容器的80％高。
它應該對齊到底部。
它應該與右側對齊。
當80％不能再容納它時，它應該換行到下一條垂直線（在右邊）。
發生這種纏繞時，顯然寬度會增加，並且應將內容（黃色框）推向左側。

我覺得這是用css實現的，所以如果可能的話避免使用javascript。

親切的問候。

---

編輯與圖：

，我發現自己在解釋事物非常糟糕。希望這兩個圖表有所幫助。我希望。

無論如何，第一個圖是我從Firefox獲得的結果，Chrome甚至沒有包裝文本。

圖2是我正在尋找的結果。到目前爲止，這個包裝是用flex-wrap實現的，但是當這個包裝發生時它不會推出容器。

Answer 1

.flex{height: auto;} 

OR

h3{align-self: auto;}