css - flex 基础 : 0% causes incorrect overflow in IE11

Question

我遇到的问题涉及flex-basis: 0%;以及当用户减小窗口宽度时 IE11 如何处理它。可能与 box-sizing 的错误有关.

我有可变数量的 flex-children，每个 child 的宽度未知。每个 child 都有任意动态生成的内容。但是，其中一些内容必须具有换行的能力。

flex-container 本身必须有 100% 的宽度，并且必须能够包装它的 child (即， flex-wrap: wrap )。

让我们假设存在三个 flex-children，最后一个需要文本换行:

<div class="flex-container">
  <div class="flex-child">
    <div>This text should not overlay other flex-children.</div>
  </div>
  <div class="flex-child">
    <div>This text should not overlay other flex-children.</div>
  </div>
  <div class="flex-child">
    <div class="text-break">This text should break on new lines when the container shrinks down</div>
  </div>
</div>

CSS 可以定义如下:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.flex-child {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0%;
  white-space: nowrap;
  padding: 5px;
}

.text-break {
  white-space: pre-wrap;
}

当窗口足够宽时，每个 flex-child 应该并排，并且文本不会折叠:


当窗口水平缩小时，最右侧框中的文本应开始换行:


当文本不能再分行时， flexbox 本身应该开始分行:


这适用于大多数现代浏览器，但不适用于我们的 friend IE11。在 IE11 中，当更改屏幕大小时，文本可以很好地换行，但 flex-children 根本不换行。因为 flex-children 不换行，它们的内容会相互溢出:


将 flex 基础更改为 flex-basis: auto;有相反的效果:文本不会换行，但 flex-children 会换行，但没有内容溢出(在此屏幕截图中，绿色框中的文本应该是换行而不是 flex-box 换行):


我见过的大多数解决方案都需要有固定长度的 flex-children，我在这里无法承受，因为它们是动态生成的。我故意没有使用flex快捷方式属性，因为它有一些其他不相关的问题。 This answer推荐使用 _:-ms-fullscreen, :root .IE11-only-class { /* IE11 specific properties */ }如果我能解决文本换行问题，这可能会奏效，但我无法弄清楚。

我还应该说，我只需要它在最新的浏览器上工作(技术上只在某些版本的 Chrome 和 IE11 上，但让其他浏览器和版本也能工作是一个加分项)。

这是一个 code pen完整显示问题(在 IE11 和 Chrome 中查看以查看差异)。

有没有人对如何解决这个问题有任何想法？

请记住，要求是:

未知数量的未指定宽度的 flex-children

某些文本必须在 flexbox 换行之前换行

一旦文本不能再换行，flex-children 必须换行

Chrome(我使用 59.0.3071.109)和 IE11(我使用 11.0.9600.18816CO)应该以相同的方式运行。

首选仅使用 CSS 的解决方案

谢谢你。

更新:

我的一位同事建议为不包含可换行文本的 flex-children 使用单独的类。他使用了以下 HTML 和 CSS:

<!--HTML-->
<div class="flex-container">
  <div class="flex-child child-1">
    <div>This text should not overlay other flex-children.</div>
  </div>
  <div class="flex-child flex-child-without-textwrap child-2">
    <div>This text should not overlay other flex-children.</div>
  </div>
  <div class="flex-child flex-child-with-textwrap child-3">
    <div class="text-break">This text should break on new lines when the container shrinks down</div>
  </div>
</div>

和

/*CSS*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  flex-grow: 1;
  flex-shrink: 1;
  padding: 5px;
  white-space: nowrap;
}

.flex-child-without-textwrap {
  flex-basis: auto;
}

.flex-child-with-textwrap {
  min-width: 200px;
  flex-basis: 0%;
}

.text-break {
  white-space: pre-wrap;
}

他的解决方案在技术上解决了我在这里提出的问题，但我忘了提到另一个要求:

在 flex-child 中，可以有可包装文本和不可包装文本的任意组合

将第三个 flex-child 更改为:

<div class="flex-child flex-child-with-textwrap child-3">
  <div class="text-break">This text should break on new lines when the container shrinks down</div>
  <div>This text should not break on new lines</div>
</div>

在这种情况下，第三个 flex-child 中第二个 div 中的文本流出其容器，并且文本过早开始换行。

可以看到显示这个几乎可行的解决方案的代码笔 here (请注意，min-width 已被删除，因为它会导致 Chrome 出现更多问题)。

更新 2:
我认为我之前还不够清楚:任何、全部或没有一个 flex-children 可能有可换行的文本。这一切都取决于动态生成的内容。在我给出的示例中，只有第三个 flex-child 具有可换行文本，但情况可能并非总是如此。

Answer 1

请注意，此答案是在问题的 2 次更新之前发布的，这使其部分无效，尽管我暂时将其保留，但有人可能仍需要它。

经过大量的反复试验，我想出了这个设置，我的目标是让 IE 尽可能地模仿其他浏览器的行为。

IE 需要在可破坏的父项上设置最小宽度，因此文本不会在元素换行之前折叠为 0 宽度，并且 flex-basis 需要为 auto一般但0px在 break-able 的父级上，flex-grow 需要在 5 左右。

我使用仅限 IE11 的选择器(我在 this answer of mine 中显示)添加了以下规则。

_:-ms-fullscreen, :root .flex-child {
  flex-basis: auto;
}
_:-ms-fullscreen, :root .child-3 {
  flex: 5 0 0px;
  min-width: 80px;
}

Updated codepen

堆栈片段

.wrapper {
  width: 80%;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.flex-child {
  flex: 1 0 0%;
  white-space: nowrap;
  padding: 5px;
}

_:-ms-fullscreen, :root .flex-child {
  flex-basis: auto;
}
_:-ms-fullscreen, :root .child-3 {
  flex: 5 0 0px;
  min-width: 80px;
}

.text-break {
  white-space: pre-wrap;
}

/*Add backgrounds for display*/
.child-1 {
  background-color: pink;
}
.child-2 {
  background-color: lightblue;
}
.child-3 {
  background-color: lightgreen;
}

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-child child-1">
      <div>This text should not overlay other flex-children.</div>
    </div>
    <div class="flex-child child-2">
      <div>This text should not overlay other flex-children.</div>
    </div>
    <div class="flex-child child-3">
      <div class="text-break">This text should break on new lines when the container shrinks down</div>
    </div>
  </div>
</div>