White-space: pre-wrap 弄乱了 IE11 中的 flexbox 布局

Question

我正在使用嵌套的 flexbox 创建布局，其中

内部容器没有固定 width 或 height
底部 div 垂直增长以容纳内容
顶部div接管所有额外的垂直space
下div有2个span，左下和右下
左下角 span 水平增长以容纳内容
右下角span接管所有多余的水平线space
中间白字换行space不折叠

让 1-6 正常工作很容易，但由于某些原因设置 white-space: pre-wrap 完全弄乱了 IE 11 的布局，而它在 Chrome 和 Firefox 中完美运行。如果我离开 white-space 属性， flexbox 布局在 IE 中看起来也不错，但是 white-space 会折叠起来，例如缩进丢失。

关于如何解决此问题以使其在 IE 中也能正常工作的任何建议？

这是一支笔：http://codepen.io/anon/pen/emMeqg

这是代码：

HTML

<div class="container">
    <div class="top"><div>TEXT</div><div>MORE TEXT</div><div>   INDENTED TEXT</div></div>
    <div class="bottom"><span class="bottom-left">BOTTOM LEFT</span><span class="bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet porttitor pharetra. Vivamus venenatis venenatis blandit. Donec id hendrerit magna, quis bibendum sem. Mauris quis eros ac urna mattis porttitor. In orci metus, porta at consectetur at, fermentum non lectus. Praesent commodo pulvinar iaculis. Fusce vestibulum tincidunt nisi, in venenatis lacus ornare ac. Etiam sit amet blandit orci. Vestibulum lorem orci, porttitor id eros quis, blandit pellentesque turpis. Etiam dignissim, ante sed mollis mattis, ligula risus lacinia leo, vitae tincidunt nisl libero a turpis.</span></div>
</div>

CSS

.container {
    position: absolute;
    width: 50%;
    height: 80%;
    display: flex;
    flex-direction: column;
    border: green solid;
    line-height: 1;
    word-break: break-all;
}
.top {
    flex: auto;
    overflow: hidden;
    border-bottom: 1px solid;
    background-color: blue;
    white-space: pre-wrap;
}
.bottom {
    flex: none;
    background-color: red;
    display: flex
}
.bottom-left {
    white-space: pre-wrap;
    background-color: yellow;
    flex: none;
}
.bottom-right {
    white-space: pre-wrap;
    background-color: cyan;
    flex: auto;
}

编辑

代码已更新以匹配答案...足以将 white-space: pre-wrap 移动到内部元素。我会保留这个问题，以防有人遇到类似问题。

Answer 1

好吧，我当然问了才明白...

看起来就像将 white-space 属性从外部 div 移动到内部元素一样简单，因为额外的间距是由不同元素之间的代码换行引起的div 个元素。出于某种原因，IE 会考虑这些换行符，而其他浏览器则不会。

我会相应地更新 Pen 和代码，也许这对其他人有帮助..

White-space: pre-wrap 弄乱了 IE11 中的 flexbox 布局

White-space: pre-wrap messes up flexbox layout in IE11

html

css

internet-explorer

layout

flexbox