html - flexbox 内的文本正在换行？

Question

JS Fiddle

我有两个父盒并排放置，带有 flex 盒，在它们内部我有另一个 flex 盒，因此 h2 和 p 可以并排放置。

我没有设置父框的宽度，理想情况下我也不想设置。

为什么当每个 flexbox 都有扩展空间时我的文本内容会换行？在示例中，标题在 Is 之后换行 - 为什么 h2 不能展开，所以 This Is Title A 全部出现在一行中？

.container {
  background: grey;
  display: flex;
}

.container>div {
  align-items: center;
  display: flex;
}

h2 {
  flex-basis: 40%;
}

p {
  flex-basis: 60%;
}

<div class="container">
  <div>
    <h2>This Is Title A</h2>
    <p>Content.</p>
  </div>
  <div>
    <h2>This Is Title B</h2>
    <p>Content.</p>
  </div>
</div>

Answer 1

问题是百分比长度使用父容器作为引用，而您的代码中缺少这一点。 h2 的父级和 p元素没有定义的宽度。

一旦您在父级上定义了宽度(我知道您不想这样做)，问题就解决了。否则，使用另一个长度单位，white-space: nowrap ，或其他一些妥协。

10.2 Content width: the width property

<percentage>

Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.2 (and 2.1).