Button text not displayed when using display flex (only in IE)

Question

In html, I have a button that contains two icons and a span with text. In css, I use flex and overflow properties in order to truncate the text if it is too long. The code works fine for all browsers, except IE. Here is the example on jsfiddle: https://jsfiddle.net/fu6kfhw9/1/

HTML

<button>
  <div class="container">
    <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
    <span>TestTestTestTest</span>
    <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
  </div>
</button>

CSS

body, button {
  max-width: 100px;
}

.container {
  width: 100%;
  display: flex;

  span {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

Thanks in advance, Mark

score 3 · Accepted Answer · answered Nov 07 '17 at 10:29

You can remove the flex property on the span.

fiddle

body,
button {
  max-width: 100px;
}

.container {
  width: 100%;
  display: flex;
}

span {
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button>
  <div class="container">
    <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
    <span>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</span>
    <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
  </div>
</button>

score 1 · Answer 2 · answered Nov 07 '17 at 10:27

there are different CSS flex' for the browsers. This one should work for IE: HTML

 <button>
  <div class="container">
    <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
    <span>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</span>
    <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
  </div>
</button>

CSS:

    body, button {
  max-width: 100px;
}

.container {
  width: 100%;
  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;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

  span {
    flex: 1;
    -ms-flex: 1 0 auto;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

Working jsfiddle: https://jsfiddle.net/fu6kfhw9/7/

You might be able to remove all the different flexes though and just keep the normal one and the IE one.

score 0 · Answer 3 · answered Nov 07 '17 at 10:36

If you want to keep the flexbox you can set a fixed width for the span:

body, button {
  max-width: 100px;
}

.container {
  width: 100%;
  display: flex;
  display: -ms-flexbox; /* ie Flex */

  span {
    flex: 1;
    -ms-flex: 1 0 auto; /* ie Flex */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 50px; /* fix width of span */
  }
}

https://jsfiddle.net/fu6kfhw9/10/

Button text not displayed when using display flex (only in IE)

3 Answers3