带有 flexbox 的 IE 错误 [重复]答案

【问题标题】：IE bug with flexbox [duplicate]带有 flexbox 的 IE 错误 [重复]
【发布时间】：2018-04-06 04:06:24
【问题描述】：

我有两个宽度为 50% 的容器连续显示。在左侧容器中，有一个图像。在右边的容器中，有一个标题、一个带有一些文本的文本框和一个显示在列中的按钮。文本框有一个固定的宽度，多行的文本将被隐藏。在 chrome、mozilla 和 edge 中似乎很好，但在 IE 中，盒子不会随着内容的增加而增长。我认为flexbox 一定有问题。有任何想法吗？这是小提琴：https://jsfiddle.net/oago4ynb/2/

这里也是一个sn-p：

.wrapper {
  display: flex;
  padding: 0px 20px 0px;
  border: 1px solid red;
}

.image-container {
  width: 50%;
  position: relative;
  overflow: hidden;
  padding: 0;
}

img {
  height: 100%;
  width: auto;
  min-width: 100%;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.content {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 9px 30px 30px;
}

.text {
  flex: 1;
}

p {
  overflow: hidden;
  height: 100px;
}

<div class="wrapper">
  <div class="image-container">
    <img src="https://dummyimage.com/hd1080" alt="Image">
  </div>
  <div class="content">
    <div class="title">
      <h3>Title</h3>
    </div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere veroLorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat
        optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil
        numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!!</p>
    </div>
    <div class="button">
      <button>Click me!</button>
    </div>
  </div>
</div>

【问题讨论】：

你用的是什么版本的IE？因为display:flex 仅在 IE11 中支持。Here is the list of browser supports.。
@ShadowFiend 是的，我知道，我使用的是 IE 11.0.14393.0 - 这就是它让我感到困惑的原因......
ie11 不能很好地配合 flex 方向列（尤其是嵌套时）。您可以通过使用所有速记参数完成 flex-rule 来修复它：.text { flex: 1 0 auto; } 和 -ms-flex-pack 可能会有所帮助。
我修复了：在图像框上，flex: 1 是错误的，你必须使用 flex: 1 0 auto;为所有浏览器解决它：jsfiddle.net/oago4ynb/3
顺便说一句，我建议background-size:cover 用于左侧的图像，而不是position:absolute; left: 50%; transform: translateX(-50%) 等当前的混乱。参见jsfiddle.net/ka3tuv78/7（它适用于IE11）

标签： html css internet-explorer flexbox

【解决方案1】：

解决方案：

问题出在.text 类上的flex: 1;。 Internet Explorer 与flex 存在问题，只有一个值。其他浏览器可以理解，但是如果您在 IE 上使用 flex 属性，则必须将所有三个值都写出来，因此对于我的问题，解决方案将是 flex: 1 0 auto;。你也可以只使用一个值，但是你必须使用特定的属性，对于这种情况flex-grow: 1;。两种解决方案都可以。仅供参考：此示例还有一个已知问题：flex: 1 1 0; 或 flex: 1 0 0;。所有浏览器都会理解flex-basis 的第三个值，在这两种情况下是0。在IE中你必须写0px，否则你会遇到问题。这是两种解决方案的小提琴：https://jsfiddle.net/oago4ynb/5/

谢谢！

【讨论】：