Truncated text in nested flexbox items

Question

I want to get the text truncated which is in an flexbox item. This works totally fine. But if this flexbox item is wrapped in another flexbox item it breaks. Is there a way to make everything fluid and doesn't break out?

I've made a pen where you see that it breaks here: http://codepen.io/anon/pen/apJYaN

.accordeon {
  width: 300px;
  background-color: #eeeeee;
}

.accordeon__row {
  /* if you remove this, then it works */
  display: flex;
}

.accordeon__row-label {
  flex-basis: 30%;
}

.accordeon__row-content {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0;
}

.accordeon__row-item {
  display: flex;
}

.accordeon__row-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="accordeon">
  <div class="accordeon__row">
    <div class="accordeon__row-label">
      Mobility
    </div>
    <ul class="accordeon__row-content">
      <li class="accordeon__row-item">
        <div class="accordeon__row-value">
          1 min
        </div>
        <div class="accordeon__row-value">
          Supermarket
        </div>
      </li>
      <li class="accordeon__row-item">
        <div class="accordeon__row-value">
          1 min
        </div>
        <div class="accordeon__row-value">
          Supermarket
        </div>
      </li>
    </ul>
  </div>
  <div class="accordeon__row">
    <div class="accordeon__row-label">
      Mobility
    </div>
    <ul class="accordeon__row-content">
      <li class="accordeon__row-item">
        <div class="accordeon__row-value">
          1 min
        </div>
        <div class="accordeon__row-value">
          Supermarket
        </div>
      </li>
      <li class="accordeon__row-item">
        <div class="accordeon__row-value">
          1 min
        </div>
        <div class="accordeon__row-value">
          Supermarket
        </div>
      </li>
    </ul>
  </div>
  <div class="accordeon__row">
    <div class="accordeon__row-label">
      Schools
    </div>
    <ul class="accordeon__row-content">
      <li class="accordeon__row-item">
        <div class="accordeon__row-value">
          1 min
        </div>
        <div class="accordeon__row-value">
          Akademisches Gymnasium Beethovenplatz 1
        </div>
      </li>
      <li class="accordeon__row-item">
        <div class="accordeon__row-value">
          1 min
        </div>
        <div class="accordeon__row-value">
          Supermarket
        </div>
      </li>
    </ul>
  </div>
</div>

Answer 1

You can add the following line:

.accordeon__row-content {
  ...
  min-width: 0; /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
}

And adjust this line:

.accordeon__row-label {
  flex: 0 0 30%; /* fixed width flex item, previously flex-basis: 30%; */
}

codepen