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>

No sure what you're after. Is this it? http://codepen.io/anon/pen/MJpXbO — Michael Benjamin, Jan 20 '17 at 14:25

score 5 · Accepted Answer · answered Jan 20 '17 at 16:05

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

score 0 · Answer 2 · answered Jan 20 '17 at 15:57

Not sure what exactly you want it to look like, but you an accomplish it by using a grid layout rather than flexbox. So nothing breaks out of the parent container.

Here is how you can accomplish a grid layout:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 0;

}

.row {
    width: 300px;
    margin: 0 auto;

}

.row::after {
    content: "";
    clear: both;
    display: block;
}

Then give each of your accordeon__row the row class and give each of your accordeon__row-item the col-12 class. This way you ensure that the item is always contained in the parent row. You can play around with assigning different col-n classes to your items.

https://jsfiddle.net/alabianc/755vgz29/1/ this shows your code but in a grid layout. Its much more easy to change layouts depending on screen widths too.

Truncated text in nested flexbox items

2 Answers2

Linked