Horizontal scrolling, vertical scrolling, flexbox, and browser compatibility

Question

It seems like the solution should be simple, but I've been spinning my wheels for days now (I still feel like I'm missing something simple). The following codepen demonstrates correct functionality in Chrome:

codepen example

The raw html for reference:

<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>

The raw css for reference:

 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;
 }

However, FireFox/Edge demonstrate alternate scrolling and IE11 demonstrates another scrolling interpretation.

My goal is to merge the scrolling styles of FireFox/Edge/IE11 to that of Chrome. I've tried many style variations, and all fail in various ways (so elaborating on them here would not be productive).

Notes:

I have semantic-ui loading in the codepen for basic styling, but the layout is developed using pure flexbox (not the semantic grid system).
Semantic ui already uses normalizer, so it is turned off in the codepen css.
In codepen I have "autoprefixer" turned on.
When viewing in IE, adjust the height of the preview window, and the preview window's vertical scroll bar will suddenly show scrolling (to be clear, this is wrong).
All of my custom classes are prefixed with "app-".

Hopefully someone out there has some ideas...

Thanks everyone!

Edit 1: added "min-height: 0;" to ".app-work-zone" to obtain correct functionality in FireFox (as demonstrated here, thanks to Michael_B); however, IE and Edge still display incorrect functionality. Codepen has been updated accordingly as well. The picture below shows the Edge and IE extraneous scrollbar:

Edit 2: Below are pictures of what seems to be a working implementation of this concept by the goods folks over at Asana; however, I was struggling to understand the implementation.

Image 1) With the window collapsed resulting in correct horizontal scrolling in Edge and no content hidden at the bottom of the screen:

Image 2) With the window expanded (and no horizontal scrolling in Edge to demonstrate no content is hidden):

Add `min-height: 0` to `.app-work-zone`.https://codepen.io/anon/pen/vJmjgY — Michael Benjamin, Aug 09 '17 at 17:08
@Michael_B, that definitely fixes the FireFox issue; however, IE and Edge still demonstrate incorrect functionality. Are IE and Edge displaying correctly for you? — jpetitte, Aug 09 '17 at 17:36
I tested in Edge and FF, and both seemed to work after the fix. However, go through all flex items in your code and make sure the `min-height: auto` / `min-width: auto` defaults are overridden where necessary. — Michael Benjamin, Aug 09 '17 at 17:38
@Michael_B, I'll take a look at the flex items min-height/min-width. To clarify the issues with IE and Edge, I see an extra scroll bar to the extreme right of the window that seems to be added due to the horizontal scroll bar taking up vertical space (not present in Chrome and FF). Do you see that in your tests? I see it in both my codepen and yours. I can post a screen shot if it helps. — jpetitte, Aug 09 '17 at 17:44
Looks like an Edge / IE bug. Have you considered adding `overflow-y: hidden` to `.app-content`? https://codepen.io/anon/pen/brWKEv — Michael Benjamin, Aug 09 '17 at 17:52
@Michael_B, I considered that. I would have to back the content off from the bottom edge of the screen to prevent it from being cut off; however, I suspected screen resolutions/scaling (and as a result, scroll bar width) differences would make it difficult to predict exactly how much to back off the content. I actually found a working implementation of this concept without the scroll bar issue (at least, I think it is...); however, I was struggling to reverse engineer it. I'll post some information on that implementation here. — jpetitte, Aug 09 '17 at 18:04

Horizontal scrolling, vertical scrolling, flexbox, and browser compatibility

0 Answers0