省略号溢出不适用于Flexbox项目

Question

我有此设置：

.flex-container {
    margin: auto;
    display: flex;
    flex-direction: row;
    width: 75vw;
    justify-content: center;
    align-items: flex-start;
}

然后是三个部分（左侧导航栏，中间内容，右侧信息栏），分别具有flex 1、8、1。

在右侧的信息栏中，我想在用户名上填充省略号，这是该部分的CSS：

.main-infobar {
    flex: 1;
    position: sticky;
    top: 0;
}
.main-infobar__items {
    display: flex;
    flex-direction: column;
}
.main-infobar__items__item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

在SO上阅读时，我发现我需要在flex项，它的父项或它的父项的父项上放置最小宽度：0或溢出：，因为它是flexbox中一个flex项。此解决方案无法结合使用，所以我很茫然。

当前正在发生的是，如果.main-infobar__items__item中的内容太长，则会拉伸整个列。我希望它保持其初始大小和...的溢出量。任何帮助表示赞赏。

.flex-container {
  margin: auto;
  display: flex;
  flex-direction: row;
  width: 75vw;
  justify-content: center;
  align-items: flex-start;
}

.main-infobar {
  flex: 1;
  position: sticky;
  top: 0;
}

.main-infobar__items {
  display: flex;
  flex-direction: column;
}

.main-infobar__items__item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<section class="flex-container">
  <nav class="main-navbar">
    <div class="main-navbar__brand">
    </div>
    <div class="main-navbar__navs">
      <div class="main-navbar__navs__item">
        <span>item1</span>
      </div>
      <div class="main-navbar__navs__item">
        <span>item2</span>
      </div>
      <div class="main-navbar__navs__item active">
        <span>etc</span>
      </div>
    </div>
  </nav>
  <section class="main-content">
  </section>
  <header class="main-infobar">
    <div class="main-infobar__items">
      <div class="main-infobar__items__item">
        logged in as
      </div>
      <div class="main-infobar__items__item">
        14 messages
      </div>
      <div class="main-infobar__items__item">
        8 notifications
      </div>
      <div class="main-infobar__items__item">
        8 notifications extra long thing test
      </div>
    </div>
  </header>
</section>