Question

我使用嵌套的flexbox来创建一个布局

内部容器没有固定的width或height
底部div垂直增长以容纳内容
热门div接管所有额外的垂直空间
底部div有2 span s，左下角和右下角
左下角span水平增长以容纳内容
右下角span接管所有额外的水平空间
单词包裹在中间，空白区域未折叠

很容易让1-6工作，但出于某种原因设置white-space: pre-wrap完全混淆了IE 11的布局，当它在Chrome和Firefox中完美运行时。如果我将white-space属性保留下来，Flexbox布局在IE中看起来也不错，但是空白区域会崩溃，例如压痕丢失了。

有任何建议如何解决这个问题，以便在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会将这些换行因素考虑在内，而其他浏览器却没有。

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

白色空间：在IE11中预先包装了Flexbox布局

1 个答案: