How to break words with IE 11 running on WP 8.1?

Question

I'm struggling to get word-wrap: break-word; to work on Nokia Lumia 930 (and probably other Windows phones). Any ideas? The text just floats over to the next tab.

It seems to be working ok in iOS and Android.

body {
  background: lightblue;
}

.container {
  width: 320px;
  margin: 20px auto;
  border: 1px solid #ebebeb;
  background: white;
}

.tabs {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.tab {
  width: 25%;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-right: 1px solid #ebebeb;
}

.tab:last-child {
  border-right: none;
}

.label {
  display: block;
  margin: auto 0;
  text-align: center;
  word-wrap: break-word;
}

<div class="container">
  <div class="tabs">
    <div class="tab">
      <span class="label">xxxxxx xxx xxxxxxxxxx</span>
    </div>
    <div class="tab">
      <span class="label">xxxxxx xx xxxxx</span>
    </div>
    <div class="tab">
      <span class="label">xxxx xxxxxx</span>
    </div>
    <div class="tab">
      <span class="label">xxxxxx xx</span>
    </div>
  </div>
</div>

Answer 1

Adding align-self: stretch to .label solves it.

.label{
   align-self: stretch
}