Question

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

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

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

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

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

Outer container

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

Inner container

在其他尝试中，我也禁用了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来自何处。我删除了所有元素的填充。我想找到一个不基于固定像素大小的真正解决方案，或者至少了解造成此问题的真正原因。

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>

如何考虑内部可滚动容器的高度到外部容器的高度？

1 个答案: