Более упрощенный ответ заключается в том, что NaN не имеет числового значения, поэтому нет ничего в этом, чтобы сравнивать с чем-либо еще.
Вы можете рассмотреть возможность тестирования и замены ваших NaN с помощью + INF, если вы хотите, чтобы они действовали как + INF.
Добавьте 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>