Cannot Truncate Text in a Flexbox Item if an Ancestor Class is Also a Flexbox

Question

In my programs, I often build the user interface as a series of Flexbox containers and items. In a program currently under development, I have need of a Flexbox row containing two items: a piece of text and a clickable button. The text can be of any length and I would like to truncate it when it becomes so long that it will not fit in the space available.

I have been able to achieve what I want with the following HTML and CSS. The deeply nested HTML represents the structure used in the actual program.

<div class="Site">
  <div class="Site-content">
    <div class="note-container">
      <div class="info-column">
        <div class="info-row">
          <div class="info-item">
            A really long piece of text for this experiment that is supposed to handle really long text that should be truncated if everything works as it should hopefully.
          </div>
          <div class="info-item to-end">
            <div class="note-tab-control--add-note-button">
              <span class="note-tab-control--add-note-icon">+</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The CSS used is:

.Site {
  display: flex;
  flex-direction: column;
}

.Site-content {
  /* display: flex; */
  flex-direction: row;
  flex: 1 0 auto;
}

.note-container {
  display: flex;
  flex-direction: column;
  flex: 0 0 400px; /* Actually set from user preference */
}

.info-column {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  flex-direction: row;
}

.info-row>div:first-child {
  white-space: nowrap;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.to-end {
  flex: 0 0 auto;
  margin-left: auto;
}

.info-item {}

.note-tab-control--add-note-button {
  padding: 5px;
  border: 1px solid #9daca9;
  border-radius: 5px;
  background-color: #e0ffff;
}

.note-tab-control--add-note-icon {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-bottom: 0.1rem;
}

The above is available in this JSFiddle. If you try it, you will see that it does just what I want.

However, the CSS fails when laying out the larger program interface, which requires that the .Site-content class include the display:flex declaration that is commented out above. When it is uncommented, the rest of the interface is laid out correctly but the text truncation no longer works and it expands its container rather than truncating the text.

What is causing the incompatibility?