Workaround for IE 10/11 flex child overflow alignment

Question

If a flex container has justify-content: center, and there is a single flex child that is wider than the container, the content remains centered (with content overflowing equally in both directions) in all browsers except IE10 and IE11.

In most browser you get this:

In IE 10/11 you get this:

I need a way to achieve the centered layout in those IE browsers without ditching the flexbox approach entirely. I'm open to CSS hack IE workarounds if necessary.

Here is a fiddle with the example:

.wrap {
  width: 100%;
  height: 100%;
}

.layer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

.layer-inner {
  font-size: 20px;
  width: auto;
  white-space: nowrap;
  line-height: 1em;
}

<div class="wrap">
  <div class="layer">
    <span class="layer-inner">
      This overlowing text should be centered
    </span>
  </div>
</div>

Answer 1

I figured it out. In IE 10/11 "justify-content" and "align-items" behave differently. If the child is larger than the container along the justify-content axis, then IE 10/11 will only ever use the "justify-content: flex-start" behavior. If the child is larger than the container along the "align-items" axis though, the content will be properly aligned according to the "align-items" value, even it the child overflows the container.

My solution was just to add "flex-direction: column" to the snippet below:

.wrap {
  width: 100%;
  height: 100%;
}

.layer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

.layer-inner {
  font-size: 20px;
  width: auto;
  white-space: nowrap;
  line-height: 1em;
}

<div class="wrap">
  <div class="layer">
    <span class="layer-inner">
      This overlowing text should be centered
    </span>
  </div>
</div>