如何消除因自动换行导致的div右侧空白？

当浏览器窗口缩至极小尺寸时，文本自动换行后div右侧会出现空白。如何在保留自动换行的前提下，让内容对齐右侧并消除该空白？

已尝试的方案：

display: inline;
display: inline-block;
float: left;
white-space: nowrap; /* 不符合预期，因为需要保留内边距和换行 */

当前代码：

CSS #

.page-container {
  padding: 160px 48px 48px 48px;
  margin: 0 auto;
  max-width: calc(1080px + 96px);
  height: 90%;
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: flex-end;
}

.title-container {
  background-color: red;
  max-width: 60vw;
  text-align: left;
}

HTML #

<div className="page-container">
  <div className="title-container">
    <h1>
      Text <br /> More Text
    </h1>
    <br />
    <h3>Item1 / Item2 / Item3 / Item4 / Item5</h3>
    <br />
    <h2>Element1 / Element2 / Element3</h2>
  </div>
</div>

解决方案：
调整.title-container的样式即可实现需求：

.title-container {
  background-color: red;
  max-width: 60vw;
  /* 让容器宽度贴合内容实际宽度，消除右侧多余空白 */
  width: fit-content;
  /* 让换行后的文本保持右侧对齐 */
  text-align: right;
  /* 确保容器在flex父容器中靠右对齐 */
  margin-left: auto;
}

说明：

1. width: fit-content 使容器仅占用内容所需的宽度，避免内容换行后容器仍占据max-width的宽度，彻底消除右侧空白。
2. text-align: right 保证文本自动换行后仍保持右侧对齐，满足内容对齐要求。
3. margin-left: auto 配合父容器的flex布局，确保容器始终靠右，效果更稳定。

若需要文本在容器内左对齐，仅保留text-align: left，添加width: fit-content即可实现容器贴合内容且整体靠右的效果。

内容的提问来源于stack exchange，提问作者BenjaminK