CSS truncation with flexbox: IE 10/11

Question

I'm trying to set up a layout where the text in the left-hand column will become truncated if/when it runs out of space, but the text in the right-hand column will always display in full. This codepen shows exactly what should happen -

http://codepen.io/robinkparker/pen/oLQZqv

<div class="tile">
  <a class="action" href="#">
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
  </a>
  <a class="action action--r" href="#">
    <div class="sibling">&lt;sibling&gt;</div>
  </a>
</div>

.tile {
  border: 1px solid black
  display: flex
  margin: 1em 0
}

.action {
  border: 1px dashed black
  color: black
  flex-shrink: 1
  flex-grow: 1
  min-width: 0
  max-width: 100%
  padding: 1em
  text-decoration: none
}

.action--r {
  flex-grow: 0
  flex-shrink: 0
}

.subtitle {
  display: inline-block
  width: 100%

  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
}

This works perfectly in most of the modern browsers I need to support, but I can't work out how to get this working in IE10 and IE11, since I have very limited experience working with flexbox. Can anyone help?!

Thanks, Robin

Answer 1

As recommended by @GregMcMullen, caniuse is a great tool. There's a few things you were missing, though, to make this work for IE (tested on IE10 and 11):

1. .action needs display: block and overflow: hidden
2. All flexbox properties should be prefixed with -ms. -ms-flexbox is for IE10, while -ms-flex is for IE11.
3. .subtitle didn't need the extra rules you had

.tile {
  border: 1px solid black;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
}

.action {
  display: block;
  border: 1px dashed black;
  color: black;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1em;
  text-decoration: none;
  overflow: hidden;
}

.action--r {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

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

<div class="tile">
  <a class="action" href="#">
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
  </a>
  <a class="action action--r" href="#">
    <div class="sibling">&lt;sibling&gt;</div>
  </a>
</div>