html - 空白 : pre-wrap messes up flexbox layout in IE11

Question

我正在使用嵌套的 flexboxes 创建一个布局，其中

1. 内部容器没有固定的宽度或高度
2. 底部 div 垂直增长以容纳内容
3. 顶部 div 占据所有额外的垂直空间
4. 底部div有2个span，左下和右下
5. 左下角 span 水平增长以容纳内容
6. 右下角 span 占据所有额外的水平空间
7. 单词中间换行且空格不折叠

让 1-6 正常工作很容易，但由于某些原因，设置 white-space: pre-wrap 完全搞乱了 IE 11 的布局，而 IE 11 在 Chrome 和火狐。如果我离开 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 和代码，也许这对其他人有帮助..