相关疑难解决方法(0)

我设计了一个100%宽度100%高度布局与css3 flexbox,它适用于IE11(如果IE11仿真正确,可能在IE10上).

但Firefox(35.0.1),overflow-y无效.正如你在这个codepen中看到的那样:http://codepen.io/anon/pen/NPYVga

firefox没有正确渲染溢出.它显示了一个滚动条

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.level-0-container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; 
}
.level-0-row1 {
  border: 1px solid black;
  box-sizing: border-box;
}
.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row; …

我template-home2.php在Wordpress主题中创建了一个新的模板文件.

在那里我有一个3列的行,我想使这些列中的每一列都可滚动而不是整个页面.我怎样才能做到这一点？

我有一个类scrollable,我应用于页面的外部部分,使其可滚动.

<section class="<?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "w-f-md";} ?>" id="ajax-container">
    <section class="hbox stretch bg-black dker">
        <section>
            <section class="vbox">
                <section class="scrollable">
                    <div class="row">
                       <div class="col-md-5 no-padder no-gutter">
                           some data
                       </div>
                       <div class="col-md-4 no-padder no-gutter">
                           some data
                       </div>
                       <div class="col-md-3 no-padder no-gutter">
                           some data
                       </div>
                    </div>
                </section>
            </section>
        </section>
    </section>
</section>

当我从主要部分删除"可滚动"类并将其包含在列div中时,列会消失,其他2列会在下面的元素上溢出.

这是相关的CSS

.scrollable {
  overflow-x: hidden;
  overflow-y: auto;
}
.no-touch .scrollable.hover {
  overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
  overflow: visible;
  overflow-y: …