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

Более упрощенный ответ заключается в том, что NaN не имеет числового значения, поэтому нет ничего в этом, чтобы сравнивать с чем-либо еще.

Вы можете рассмотреть возможность тестирования и замены ваших NaN с помощью + INF, если вы хотите, чтобы они действовали как + INF.

1
задан Temani Afif 4 March 2019 в 19:15
поделиться

1 ответ

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

РЕДАКТИРОВАТЬ:

Flex-Grow / Shrink отсутствовал в .container>div. Добавьте правило 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>

0
ответ дан BrunoFenzl 4 March 2019 в 19:15
поделиться