Flexbox与水平预/代码滚动的兼容性

Question

我在里面有一些代码pre和code标签在我想要水平滚动的引导容器中.这通常很好,直到我为我的页面添加一个flexbox body才能完成粘性页脚.此后,code当页面较窄时(例如移动查看),不再水平滚动.

这是我的代码(请注意,code当您缩小窗口时,水平滚动条会消失):

html, body {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
code {
    max-height: 200px;
    background-color: #eeeeee;
    word-break: normal !important;
    word-wrap: normal !important;
    white-space: pre !important;
}
.flexer {
    flex: 1;
}
footer {
    background-color: #CCC;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-12 docs">
            <p>Some sample code</p>
            <pre><code>Loading mirror speeds from cached hostfilebase: mirrors.arpnetworks.com * centosplus: mirrors.arpnetworks.com* extras:mirrors.arpnetworks.com*rpmforge: mirror.hmc.eduupdates: mirrors.arpnetworks.comExcluding Packages in global exclude list</code></pre>
        </div>
    </div>
</div>
<div class="flexer"></div>
<footer>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
            footer
            </div>
        </div>
    </div>
</footer>

http://jsfiddle.net/nturor46/1/

任何想法如何使用flexbox粘性页脚,同时仍然保持滚动pre/ code？

Answer 1

一个简单的

.container { width:100%; }

正确调整网站大小.但是,Chrome不允许您实际使用滚动条.这是因为它溢出了所有容器的尺寸(除了BODY).因此,我们必须告诉浏览器正确识别前节点:

.container {
  max-width: 100%;
}
pre {
  position: relative;
}

这告诉Chrome再次正确处理鼠标事件并修复布局

请注意,pre-node 的margin-bottom 在overflow-country中丢失,这可能会导致您的布局看起来很奇怪.max-width在最终版本中使用,以确保它不会覆盖在bootstrap中创建的固定宽度语句

PS:在当前的Chrome和Firefox中测试http://jsfiddle.net/nturor46/32/