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

Question

首先，我尝试在浏览器中进行简化 https://codesandbox.io/s/competent-bassi-yjtoj并且按预期工作。

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

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

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

我尝试了几种组合。禁用外部容器溢出并将其设置为 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>

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

提前感谢您的宝贵时间。

编辑

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

高度:计算(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>