带嵌套flex的iOS Safari文本截断问题

Question

I have ul element with display:flex and anchor inside li element with display:flex but text in anchor is getting truncated when width is restricted. Test case: http://jsfiddle.net/ypfcjfk8/4/

HTML & CSS markup Home Getting Started Long LabelLong LabelLong LabelLong Label Contact us Support Home Getting Started Long LabelLong LabelLong LabelLong Label Contact us Support

.list-element {
    display: flex;
    flex-direction: row;
    min-height: 2.71429rem;
}
.list-item-element {
    display: block;
    flex: 1 1 auto;
    padding: 10px;
}
.list-item-content {
    display: flex;
    flex: 1 1 auto;
}
.list-item-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#test {
    width: 300px;
    overflow: hidden;
    border: 1px solid red;
}

Expected behaviour: it should truncate whole list not individual item.

Expected output screenshot:

This works fine on ie 11 and Firefox, chrome but not on safari. Any help is much appreciated. Thanks in advance.

Answer 1

You have to use proper flex declarations for all browsers. Following code block made your fiddle look good in my Safari (win8).

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;

Check this page out: https://css-tricks.com/using-flexbox/