css - div 延伸到其父级高度的 100%，而不是仅仅填充其余空间，但仅在子级溢出时

问题描述

首先是一些上下文：

我正在尝试创建一个可滚动的内容区域。实际上，这是一个 React 应用程序，它将使用数据库中的记录异步填充可滚动区域。但以下内容足以说明我面临的问题，这纯粹是与样式相关的。

我有以下html结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
  <div class="app">
                <header class="main-head">The header</header>
                <nav class="main-nav">
                </nav>
                <article class="content">
          <div class="component">
              <div>just here as a placeholder to whatever pushes the div below down</div>
              <div class="table-view">
                <div class="table-content-wrapper">
                  <div class="table-content" style="height:1410px;">
                    scrollable rows go here
                  </div>
                </div>
              </div>
          </div>
                </article>
                <footer class="main-footer">The footer</footer>
            </div>
</body>
</html>

以及伴随的 CSS

index
* {
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
}

.main-head {
    min-width: 0;
    min-height: 0;
  border: 1px solid #ccc;
    grid-area: header;
}

.content {
    min-width: 0;
    min-height: 0;
  border: 1px solid #ccc;
    grid-area: content;
}

.main-nav {
    min-width: 0;
    min-height: 0;
  border: 1px solid #ccc;
    grid-area: nav;
}

.main-footer {
    min-width: 0;
    min-height: 0;
  border: 1px solid #ccc;
    grid-area: footer;
}

.app {
    display: grid;
    grid-gap: 20px;
    grid-template-areas: "header" "nav" "content" "footer";
    grid-template-rows: 1fr 1fr 10fr 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@media (min-width: 700px) {
    .app {
        grid-template-columns: 1fr 5fr;
        grid-template-rows: 2fr 25fr 1fr;
        grid-template-areas: "header header" "nav content" "footer footer"
    }

    nav ul {
        flex-direction: column;
    }
}

.component {
  height:100%;
  display:flex;
  flex-flow:column;
}

.table-view {
  height:100%;
  width:100%;
  border: 1px solid #ccc;
  background: #fff;

  display:flex;
  flex-flow:column;
}

.table-content-wrapper {
  flex: 1;
  overflow: auto;
}

.table-content {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
}

问题在于表格的内容。

首先：注意table-content div. 这是由 React 应用程序动态设置的，以便在数据集上创建准确的滚动条，table-content-wrapper div并且基于数据集包含的记录总数乘以设置的行高。

问题是何时table-content-wrapper处于溢出模式，即当记录多于可用高度显示时。这使得table-view div拉伸到的总高度component div，而不是仅占用仍然可用的高度（即：高度减去高度）。component divcomponent divplaceholder div

这很容易通过运行这个 fiddle并查看当你从table-content div. 您会看到的高度table-view div随后被占用的高度减小，placeholder div因此现在准确地保持在content article元素的范围内。但显然没有更多的滚动。

所以我想这个问题归结为：我如何使它table-view div不会超出中可用的空间component div，同时允许table-content-wrapper div使用显式高度样式处于溢出模式？

更新 1

根据第一条评论，这似乎是无法在浏览器 X 中重现的情况；所以这里有一些额外的说明：

在正常模式和隐私模式下，我在 Brave 和 Chrome 中都看到了这种行为（排除了扩展，我没有扩展）。
这是带有高度样式的屏幕截图。可以清楚的看到div的边框走出content article元素
这是没有高度样式的屏幕截图。您可以清楚地看到 div 关于content article元素边界的边界

标签： cssflexbox

css - div 延伸到其父级高度的 100%，而不是仅仅填充其余空间，但仅在子级溢出时

问题描述

解决方案

推荐阅读