IE Flexbox证明内容中心溢出问题 [英] IE Flexbox justify-content center overflow issue

问题描述

在IE11上观看以下演示时，会出现一个问题，内容显示为右对齐并推到屏幕外.

When viewing the following demo on IE11, there is an issue in which the content is displayed aligned right and pushed outside of the screen.

Codepen演示

以下是证明资源中心合理的代码:

Here is the code that justifies the content center:

.search-results {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

您可以在以下屏幕快照中看到该问题:

You can see the issue in this screenshot here:

我正在Windows 10上使用浏览器堆栈 IE 11进行仿真.

I'm using browserstack IE 11 on windows 10 to emulate.

似乎计算出的Flex包装器的宽度大于实际宽度.在元素，HTML或正文上没有设置最大/最大宽度的问题似乎可以解决.我了解IE11对flexbox有一些支持，是否缺少我想要的属性?供应商前缀是由Codepen添加的，因此在此基础上应予以介绍.

It seems to be calculating the width of the flex wrapper greater than it actually is. No amount of setting max-/width on the element, HTML or body seems to fix it. I understand IE11 has some flaky support for flexbox, is there a property I'm missing? Vendor prefixes are being added by Codepen, so I should be covered on that basis.

推荐答案

应设置Flex-basis以避免IE中出现这些问题.将".search-results__list"的flex属性更改为flex: 0 1 712px.请查看以下示例:

Flex-basis should be set to avoid these problems in IE. Change the flex property of the ".search-results__list" to flex: 0 1 712px. Check the example below:

http://codepen.io/anon/pen/QKKpGx

IE 10-11不允许在flex速记中使用无单位的flex-basis值.

IE 10-11 don’t allow unitless flex-basis values in the flex shorthand.

有关更多信息: https://philipwalton.com/articles/normalizing -cross-browser-flexbox-bugs/

这篇关于IE Flexbox证明内容中心溢出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！