FlexBox Text Truncation

Really long items in a FlexBox row should be truncated but are incompatible with FlexBox declarations higher in the hierarchy.

by clartaq

HTML

<div class="Site">
  <div class="Site-content">
    <div class="note-container">
      <div class="note-info-column">
        <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>
</div>

CSS

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

.note-info-column {
  margin-left: 17px;
}

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

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

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

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

.info-item {
  margin-right: 2rem;
}

.note-tab-control--add-note-button {
  padding: 5px;
  margin-right: 1rem;

  color: #111111;
  font-weight: bold;
  font-size: 1rem;

  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;

  font-weight: bold;
  vertical-align: 0.3rem;
  cursor: pointer;
}