Flex box with wrap inside another Flex box

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:

What my code currently do

What I want to do

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.

I think some kind of diagram of what you're hoping for would clarify a lot here — Gareth, May 02 '15 at 13:40

score 1 · Answer 1 · answered May 02 '15 at 12:46

1

.flex{height: auto;}

OR

h3{align-self: auto;}

answered May 02 '15 at 12:46

Navneet Panchariya

158
7

I can't have .flex's height be auto. align-self: auto doesn't work. It just puts h3 at the top instead of bottom. – BigName May 02 '15 at 12:52
Ok last try... Just add "width: 10%; height: 50%;" in h3 tag. – Navneet Panchariya May 04 '15 at 06:27
nope, this makes the title width always at 10%, which means won't work if title is very very very long. Furthermore, it won't shrink if title is very short. But thanks for trying to help. – BigName May 04 '15 at 14:40

Flex box with wrap inside another Flex box

1 Answers1

Linked