How to respect the height of an inner scrollable container to the outer container height?

Question

First off, I tried this simplified in the Browser https://codesandbox.io/s/competent-bassi-yjtoj and it works as expected.

In my project I'm using Electron, React and MUI and plain CSS. I do not know which of these is causing the issue. It might be simply that the CSS / Flexbox code is not correct?

Video demonstrating the issue: https://youtu.be/ym9Bhgexycs

Notice that once you try to scroll to the "bottom" in the inner container, you need to continue to scroll which is taken over by the main container; which then scrolls to the bottom of the outer container, to see the bottom of the inner container.

I tried several combinations. Disabled the outer containers overflow and set it to hidden and used auto for the inner container. Which I believe is normally correct because that's the behavior I want, to have the inner container scrollable only. In that case the inner container gets cut off and I can not scroll inside the inner container to the bottom. The scroll bar simply disappears because I am scrolling in a non see-able area.

The outer container has correct height and is not overflowing the status bar / footer.

Outer container

The inner container clearly overflow the statusbar.

Inner container

I also disabled all window related options in Electron in other tries but the issue persists.

It's a bit hard to provide a code demo illustrating the issue but here are the "main" parts which the video shows.

Globals

const styles = () => ({
  '@global': {
    'html,body': {
      height: '100%',
      margin: 0
    },
    '*': { minHeight: 0 }, // Seems to have no effect.
    '#parcel-root': { // Probably not needed.
      height: '100%',
      margin: 0
    }
  }
})

Component

  container: {
    height: '100%',
    width: '100% !important',
    display: 'flex',
    flexDirection: 'column',
    minHeight: 0,  // Suggested by Felix here but had no effect.
  },
  content: {
    flex: 1,
    overflow: 'auto',
  },
  subContainer: {
    height: '100%',
    width: '50%',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: 'blue'
  },
  subContent: {
    flex: 1,
    overflow: 'auto',
    backgroundColor: 'grey'
  },

<div className={classes.container}>
    <div name="TITLE">TITLE</div>
    <div name="CONTENT" className={classes.content}>
        SUB TITLE
        <div className={classes.subContainer}>
            <div className={classes.subContent}>
                -----   MY SCROLLABLE SUB COMPONENT DATA  ----
            </div>
        </div>
    </div>
    <div name="FOOTER">FOOTER</div>
</div>

All dependencies used are the newest releases.

Thanks in advance for your time.

EDIT

The only work-around I have found is using:

height: calc(100vh - 35px)

applied to subContainer but I have no idea where those 35px are coming from. I removed padding of all elements. I would like to find a real solution which is not based on a fixed pixel size .. or at least understand what is actually causing this issue.

Did you try removing one of the `flex: 1` properties? Also does something change if you `name=title` element is in the `name=content` container? I think the problem is caused by the two nested flex containers. — Felix Haeberle, May 17 '19 at 23:07
Hi, I removed `flex: 1` independently from each `content` and `subContent` but it had no effect. Putting `name=title` into `name=content` had no effect either. It scrolled with `name=content` div. Tested that also without `flex: 1`. — posidron, May 17 '19 at 23:15
Did you try setting `min-height: 0` to the `container`? This is a good example which also uses `overflow: auto`: https://codepen.io/anon/pen/RVmPXX?editors=1100 Also, see this question: https://stackoverflow.com/questions/44218896/scrolling-inside-nested-flexboxes — Felix Haeberle, May 17 '19 at 23:21
Oh I did, I forgot to add that here. Tried also to add it to the globals via: `'*': { minHeight: 0 }`. The codepen.io link is indeed what I want, exactly. However, in the browser the above works. This is why it is so confusing. — posidron, May 17 '19 at 23:28
I can't reproduce the problem, and I don't see the `height: calc(100vh - 35px)` you mention anywhere in your code, but it's possible that the problem relates to the flex `min-height: auto` default somewhere in your code. See here for more details, and a possible solution: https://stackoverflow.com/q/36247140/3597276 ... — Michael Benjamin, May 17 '19 at 23:37
However, there's a good chance that's not the problem, since you already have a scroll bar on that element. Without seeing the full code we can only speculate. — Michael Benjamin, May 17 '19 at 23:41
It is attached to the problem under 'EDIT' because it is a work-around and not part of the original issue itself. I tried minHeight in various ways and places, with the same result. The code is on codebox.io, it is the exact code in the electron app. Code in codesandbox.io works fine, in Electron app not. — posidron, May 18 '19 at 00:00

score 0 · Answer 1 · answered May 17 '19 at 23:52

I did some improvements to your code and now it should work.

html,
body {
  height: 100%; /* needed for proper layout */
}

body {
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title {
  flex: 0 0 auto;
}

.content {
  flex: 1 1 auto;
  position: relative;
  /* need this to position inner content */
  overflow-y: auto;
  background-color: grey;
}

.footer {
  flex: 0 0 auto;
}

<div class=container>
  <div class="title" name="TITLE">TITLE</div>
  <div name="CONTENT" class=content>
    SUB TITLE
    <div class=subContainer>
      <div class=subContent>
        ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT
        DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE
        SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ----
        ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB
        COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- -----
        MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT
        DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ----
      </div>
    </div>
  </div>
  <div class="footer" name="FOOTER">FOOTER</div>
</div>

How to respect the height of an inner scrollable container to the outer container height?

1 Answers1