flex容器中的换行符和内容宽度

Question

因此，我有一个flex容器（以全角展开），里面有两个divs。第一个是带有较大字体的短文本，另一个是带有较小字体的较长文本。

随着视口的缩小，我希望第一个flex项能够缩小并折断文字，直到无法再折断为止，而且确实如此！ 但是，每当发生新的换行符时，第一个内部div的末尾就会有多余的空间，我只是想不通如何消除它。这是代码：

.first {
  background: green;
  flex: 0 1 auto;
  font-size: 80px;
}

.second {
  background: red;
  flex: 1 1 auto;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

<div class="flex">
  <div class="first">
    TEXT WITH LARGE FONT
  </div>
  <div class="second">
    Nullam a leo odio. Suspendisse dapibus cursus sem, a congue erat viverra in. Nulla eget tortor vel risus auctor dictum tempor in urna. Nullam vestibulum vulputate elit. Mauris quis tortor varius, interdum nisl id, dignissim nulla.
  </div>
</div>

请参见插图

Answer 1

这就是flexbox的工作方式。它会按比例且稳定的比例缩放div，而不仅仅是在文本旁边有空间时缩小另一个。您可以在小文本段落上看到同样的情况，但是效果却不太明显，因为字体很小。 text-align: right没问题吗？