如何阻止 IE11 使这两条线相互重叠？

Question

我只有 IE11 有问题（Chrome + FF 工作正常），其中 2 行彼此 "on top"。

这是 link： https://jsfiddle.net/3L2bx9w9/2/

HTML:

<div>
  <label>first line first line first line first line</label>
  <div>
    <div class="content">
      <div class="contentFieldset">
        <div class="inner">
          second line second line second line second line
        </div>
      </div>
    </div>
  </div>
</div>

<div>
  <label>first line first line first line first line</label>
  <div>
    <div class="content">
      <div class="contentFieldset">
        <div class="inner">
          second line second line second line second line
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.content {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.contentFieldset {
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.inner {
  display: flex;
  flex-direction: row !important;
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
}

我的设置需要这个嵌套结构（对于这个例子我显然已经简化了它），如果顶部 div 设置了静态高度（例如 250px），它就可以工作，但我需要它来填充可用的 space.

有谁知道我可以在不删除 flexbox 或不说不使用 IE 的情况下使它工作的解决方法？谢谢

Answer 1

我听说过其他问题，请将您的 "display: flex" 更改为 "display: block"。为我工作 fiddle:

https://jsfiddle.net/3L2bx9w9/3/

.content {
  display: block;
  flex-direction: row;
  height: 100%;
}

.contentFieldset {
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
  display: block;
  flex-direction: column;
}

.inner {
  display: block;
  flex-direction: row !important;
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
}

Answer 2

答案：

无论出于何种原因，似乎 -ms-flex 行必须设置为 1 0 auto; 而不仅仅是 1。所以更正后的 CSS 看起来像：

.content {
  display: block;
  flex-direction: row;
  height: 100%;
}

.contentFieldset {
  flex: 1;
  -ms-flex: 1 0 auto;
  min-width: 0;
  display: block;
  flex-direction: column;
}

.inner {
  display: block;
  flex-direction: row !important;
  flex: 1;
  -ms-flex: 1 0 auto;
  min-width: 0;
}

我不确定为什么会这样，但我怀疑 -ms-flex 的默认处理方式与 IE 中的 flex 不同。

如何阻止 IE11 使这两条线相互重叠？

How do I stop IE11 from making these two lines go on top of each other?

html

css

flexbox

internet-explorer-11