找到你要的答案

Q:Flex box with wrap inside another Flex box

Q:弯曲盒内包另一个Flex框

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.

我有一个垂直的标题布局,左边是一个内容容器,右边是一个标题容器的垂直标题。当标题长时,我希望垂直标题包到下一条垂直线。

我想我可以用Flex来实现这个,但是结果是错误的。下面的代码片段:

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

你可以看到正在运行的代码段时,包确实发生了,但你不能看到它。我需要标题的Flex项目(H3)扩大当包发生所以你可以看到标题的休息。

此外,测试铬,标题甚至不包。但我认为这是Chrome的问题,而不是代码的问题。

我不介意用Flex盒子以外的方法,只要我得到了想要的结果。

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.

我觉得这是可以实现的,如果可能的话避免CSS,JavaScript。

亲切的问候。


用图表编辑:

我发现自己很不善于解释事情。希望这2个图表帮助。我希望。

无论如何,第一个图是我从Firefox得到的结果,Chrome甚至不包文本。

图2是我要找的结果。到目前为止,包装是实现与Flex包,但它不会推出容器时,这种包装发生。

answer1: 回答1:
.flex{height: auto;}

OR

h3{align-self: auto;}
.flex{height: auto;}

h3{align-self: auto;}
html  css