css - 如何尊重内部可滚动容器的高度到外部容器高度？

Question

首先，我在浏览器https://codesandbox.io/s/competent-bassi-yjtoj中尝试了这个简化，它按预期工作。

在我的项目中，我使用的是 Electron、React 和 MUI 以及纯 CSS。我不知道是哪一个导致了这个问题。可能只是 CSS / Flexbox 代码不正确？

演示该问题的视频：https ://youtu.be/ym9Bhgexycs

请注意，一旦您尝试滚动到内部容器中的“底部”，您需要继续滚动由主容器接管；然后滚动到外部容器的底部，以查看内部容器的底部。

我尝试了几种组合。禁用外容器溢出并将其设置为hidden用于auto内容器。我认为这通常是正确的，因为这是我想要的行为，只能让内部容器滚动。在这种情况下，内部容器被切断，我无法在内部容器内滚动到底部。滚动条只是消失了，因为我在一个看不见的区域滚动。

外部容器具有正确的高度并且没有溢出状态栏/页脚。

外容器

内部容器明显溢出状态栏。

内容器

我还在其他尝试中禁用了 Electron 中所有与窗口相关的选项，但问题仍然存在。

提供说明问题的代码演示有点困难，但这里是视频显示的“主要”部分。

全局变量

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

零件

  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>

使用的所有依赖项都是最新版本。

在此先感谢您的时间。

编辑

我发现的唯一解决方法是使用：

height: calc(100vh - 35px)

适用于subContainer但我不知道那些 35px 来自哪里。我删除了所有元素的填充。我想找到一个不基于固定像素大小的真正解决方案..或者至少了解实际导致此问题的原因。

标签： cssreactjsflexboxelectronmaterial-ui

Answer 1

我对您的代码做了一些改进，现在它应该可以工作了。

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>