Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Workaround for IE 10/11 flex child overflow alignment

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:

enter image description here

In IE 10/11 you get this:

enter image description here

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>
like image 662
Matt Dietsche Avatar asked Feb 17 '17 16:02

Matt Dietsche


1 Answers

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>
like image 164
Matt Dietsche Avatar answered Oct 14 '22 00:10

Matt Dietsche