柔性包装盒，在另一个柔性包装盒内包裹

Question

I have a vertical title layout where the left is a content container, and the right is a title container with a vertical title. And I want the vertical title to wrap to the next vertical line when title is long.

I thought I could achieve this with flex box, but the result is wrong. Code snippet below:

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

As you can see when running the code snippet, the wrap did happen, but you cannot see it. I need the title flex item (h3) to expand when a wrap happens so you can see the rest of the title.

Also, testing in Chrome, the title doesn't even wrap. But I think this is Chrome's problem, not the code's problem.

I don't mind using methods other than flex box, as long as I get the desired result.

Some more info about the layout:
the title should be 80% tall of its container.
It should be aligned to the bottom.
It should be aligned to the right.
It should wrap to next vertical line (at the right) when 80% can no longer accommodate it.
When this wrap happens, obviously the width would grow, and content (the yellow box) should be pushed to the left.

I feel this is achievable with css, so avoid javascript if possible.

Kind regards.

---

Edit with diagram:

I find myself very bad at explaining things. Hopefully these 2 diagrams help. I hope.

Anyway, the first diagram is the result I get from Firefox, Chrome does not even wrap the text.

Diagram 2 is the result I'm looking for. So far the wrapping is achieved with flex-wrap, but it does not push out the container when this wrapping happens.

Answer 1

.flex{height: auto;}

要么

h3{align-self: auto;}