Текст внутри флексбокса переносится?

Question

JS Fiddle

У меня есть две родительские коробки, расположенные рядом друг с другом с помощью гибкой коробки, внутри них у меня есть еще одна гибкая коробка, чтобы можно было сидеть на h2 и pбок о бок.

Я не установил ширину родительских блоков и в идеале не хочу.

Почему мой текстовый контент переносится, когда для каждого гибкого блока есть место длярасширить?В примере заголовок переносится после 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 Ширина содержимого: свойство width

<percentage>

Задает ширину в процентах.Процент рассчитывается относительно ширины содержащего блока сгенерированного блока.Если ширина содержащего блока зависит от ширины этого элемента, то результирующий макет не определен в CSS 2.2 (и 2.1).

Answer 2

Добавьте flex-grow: 1 и flex-shrink: 0 к вашему h2.Это предотвратит сокращение h2.Кроме того, поскольку вы ограничиваете относительный максимум, который может увеличить h2 (40%), он все равно сломался бы.Добавьте правило flex: 1 1 авто;поэтому они расширяются равномерно, чтобы заполнить всю ширину.

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

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

h2 {
  flex: 1 0 40%;
  white-space: nowrap:
  /*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>