Ellipsis overflow not working as intended with flexbox item

Question

I have this setup:

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

and then three sections (left navbar, middle content, right infobar) with flex 1, 8, 1 respectively.

Inside the infobar on the right, I want to overflow ellipsis on the username, this is the css for that section:

.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;
}

Reading on SO, I found I needed to either put min-width: 0 or overflow: hidden on the flex item, its parent, or perhaps its parent's parent as it's a flex item in a flex item in a flexbox. No combination of this solution worked and so I'm at a loss.

What is currently happening is that if something within an .main-infobar__items__item is too long, it stretches the whole column. I want it to remain at its initial size and ... the overflow. Any help is appreciated.

.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>