Question

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

这里也是一个片段：

.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>

Answer 1

<强> SOLUTION：

问题是flex: 1;类上的.text。 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/

谢谢！

与flexbox的IE错误

1 个答案: