具有包装在另一个柔性盒内的柔性盒

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