Question

似乎解决方案应该很简单，但我现在已经旋转了几天（我还是觉得我错过了一些简单的东西）。以下codepen演示了Chrome中的正确功能：

原始html供参考：

<body>
  <div class="app-master">
    <div class="app-sidebar-spacer">

    </div>
    <div class="app-content">
      <div class="app-header">
        <div class="ui secondary small menu">
          <a class="right item">
            <div>
              <span>happy text</span>
            </div>
          </a>
        </div>
      </div>
      <div class="app-work-zone">

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

            <div>
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ip"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

            </div>
          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

      </div>
    </div>
  </div>
</body>

原始css供参考：

 html,
 body {
   height: 100%;
   margin: 0;
   min-height: 100%;
   padding: 0;
 }

 .app-master {
   display: flex;
   flex-direction: row;
   height: 100%;
 }

 .app-sidebar-spacer {
   flex: 0 0 215px;
   background-color: #2959a5;
 }

 .app-content {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   overflow-x: auto; 
 }

 .app-header {
   min-height: 43px;
 }

 .app-header>.ui.menu {
   width: 100%;
 }

 .app-work-zone {
   flex: 1 1 auto;
   display: flex;
   flex-direction: row;
   min-height: 0; /* edit 1 */
 }

 .app-zone-content {
   flex: 1 1 0;
   min-width: 600px;
 }

 .app-zone-buffer {
   width: 2px;
   text-align: center;
 }

 .app-zone-segment {
   height: 100%;
   overflow-y: auto;
 }

然而，FireFox / Edge演示了替代滚动，IE11演示了另一种滚动解释。

我的目标是将FireFox / Edge / IE11的滚动样式与Chrome的滚动样式合并。我尝试了很多样式变化，并且都以各种方式失败（所以在这里详细阐述它们会不高效）。

注意：

我在codepen中有基本样式的语义加载，但布局是使用纯flexbox（而不是语义网格系统）开发的。
Semantic ui已经使用了规范化器，因此它在codepen css中被关闭。
在codepen中我打开了“autoprefixer”。
在IE中查看时，调整预览窗口的高度，预览窗口的垂直滚动条将突然显示滚动（要清楚，这是错误的）。
我的所有自定义类都以“app - ”为前缀。

希望有人有一些想法......

谢谢大家！

修改1：添加了“min-height：0;”到“.app-work-zone”获取FireFox中的正确功能（如演示here，感谢Michael_B）;但是，IE和Edge仍然显示不正确的功能。 Codepen也已相应更新。下图显示了Edge和IE无关的滚动条：

编辑2：下面是Asana的货物人员对这个概念的工作实施的图片;但是，我很难理解实施。

图片1）折叠窗口导致Edge中水平滚动正确，屏幕底部没有隐藏内容：

图片2）展开窗口（Edge中没有水平滚动以显示没有隐藏内容）：

水平滚动，垂直滚动，flexbox和浏览器兼容性

0 个答案: